scale()

Обновлено: 31.05.2022

scale()

Масштабирует элемент в двумерном пространстве по горизонтали и вертикали или одновременно в двух направлениях. Изменение масштаба может происходить как в большую, так и в меньшую сторону.

Синтаксис

transform: scale(sx);
transform: scale(sx, xy);

Значения

sx Масштаб элемента по горизонтали.
sy Масштаб элемента по вертикали. Если значение не указано, то по умолчанию принимается равным sx.

Одно значение задаёт масштабирование элемента одновременно по горизонтали и вертикали, с сохранением пропорций сторон элемента. Два значения задают масштаб элемента по горизонтали и вертикали независимо, что может привести к искажению пропорций сторон.

Пример

В данном примере при наведении указателя на картинку она плавно увеличивает свой масштаб. Чтобы размеры блока оставались исходными используется свойство overflow со значением hidden.

Браузеры

scale

Посмотреть совместимость на Can I use?

scale