Масштабирование в 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 */
}
 

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.