Меню ×
Масштабирование в 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.


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

В данной статье мы расскажем, как организовать на вашем сайте интересное решение, а именно речь пойдет о том. как организовать разделение блоков с помощью косых границ или наклонов. Суть идеи в том, чтобы линии были не строго горизонтальными, а под углом.

Атрибут placeholder применяется для призыва к действию внутри пустых элементов input и textarea. В этой статье мы рассмотрим возможности стилизации текста placeholder-a, а также некоторые трюки, которые позволят сделать его более удобным и функциональным.

Как прижать подвал сайта (footer) в самый низ окна браузера, чтобы страница при этом выглядела вытянутой на всю высоту.

наверх