scale()
Обновлено: 17.01.2023
scale()
Масштабирует элемент в двумерном пространстве по горизонтали и вертикали или одновременно в двух направлениях. Изменение масштаба может происходить как в большую, так и в меньшую сторону.
Синтаксис
transform: scale(sx);
transform: scale(sx, xy);
Значения
| sx | Масштаб элемента по горизонтали. |
| sy | Масштаб элемента по вертикали. Если значение не указано, то по умолчанию принимается равным sx. |
Одно значение задаёт масштабирование элемента одновременно по горизонтали и вертикали, с сохранением пропорций сторон элемента. Два значения задают масштаб элемента по горизонтали и вертикали независимо, что может привести к искажению пропорций сторон.
Пример
В данном примере при наведении указателя на картинку она плавно увеличивает свой масштаб. Чтобы размеры блока оставались исходными используется свойство overflow со значением hidden.