Меню ×
Масштабирование в CSS средствами zoom и transform

Масштабирование в CSS средствами zoom и transform

Масштабировать элементы можно используя css свойство zoom. Но свойство CSS Zoom, поддерживается в IE 5.5+, Opera, Safari 4 и Chrome.

Firefox - единственный браузер, который не поддерживает css свойство zoom. Начиная с Firefox 3.5 рекомендуется использовать css свойство с префиксом -moz-transform.

Пример:

	
div.zoom {
      zoom: 2; /* all browsers */
     -moz-transform: scale(2);  /* Firefox */
}
	

Масштабирование блока на CSS

Cегодня мы можем просто использовать CSS свойство transform: scale.

Это уже работает во всех современных браузерах. scale необходимо задать параметиры (X, Y), например (0,5).

	
-moz-transform: scale(0.5, 0.5);

-ms-transform: scale(0.5, 0.5);

-webkit-transform: scale(0.5, 0.5);

-o-transform: scale(0.5, 0.5);

transform: scale(0.5, 0.5);
	

Преобразование может оставить пустое пространство вокруг элемента, который получил меньший размер после визуализации (преобразование применяется после визуализации), и для минимизации проблем пустого интервала мы можем использовать transform-origin CSS.

	
-moz-transform-origin: left top;

-ms-transform-origin: left top;

-webkit-transform-origin: left top;

transform-origin: left top;
	

Значения можно так же указывать в % и px

Рекомендуется добавить максимальную высоту - max-height элементу или отрицательный margin-bottom.

Похожие материалы

Pixel Perfect верстка — это особая техника создания структуры html-кода, которая позволяет сверстанному html-шаблону максимально точно совпадать с оригинальным PSD-макетом пиксель в пиксель.

Браузер для BlackBerry, Android и Safari для IOS (iPhone / IPod / IPad) автоматически обнаруживает телефонные номера и адреса электронной почты на веб страницах и преобразует их в ссылки. Если вам это не надо, используйте следующие мета-теги. Для Safari (iPhone…Подробнее »

Реализация адаптивных html-блоков с содержанием в виде кирпичной кладки Masonry, исключительно средствами CSS3 без JavaScript.

наверх