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

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

В данной статье приведен пример стилизации select'а на чистом CSS для Chrome, Safari, Firefox и IE9+ без добавления дополнительных элементов.

В настоящее время весь интернет гудит о адаптивном веб-дизайне, потому что все хотят, чтобы их сайт хорошо отображался на различных устройствах. В этом уроке мы научимся создавать очень простой шаблон «универсального» сайта.

Мне приходилось встречать довольно много разные способы определения мониторов retina. Одни являются объемными, другие наоборот. Давайте рассмотрим, какие из media quires изпользовать для ретинизации.

наверх