Синтаксис
Функция scale масштабирует HTML-элемент, но только визуально: реальный размер элемента не меняется.
Scale помогает:
- увеличить элемент по оси X;
- уменьшить по вертикали;
- увеличить по горизонтали и вертикали;
- уменьшить по горизонтали;
- увеличить по вертикали;
- уменьшить по оси X и Y одновременно.
Масштабирование осуществляется вокруг точки, которую задает свойство transform-origin. HTML-элементы растягиваются или сжимаются при наведении курсора.
Функция scale в CSS принимает одно, два или три значения:
scale(x,y,z)
Синтаксис для изменения масштаба с одинаковым значением по обеим осям одновременно:
селектор {
transform: scale(число);
}
Синтаксис для масштабирования по горизонтали и по вертикали (разные параметры):
селектор {
transform: scale(значение по оси X, значение по оси Y);
}
Значения
Значениями параметров могут быть целые, дробные числа, проценты. Если указать число больше 1, масштаб элемента увеличится. Если число меньше 1 — уменьшается.
Если указать 1, визуальное отображение не изменится. Если передать отрицательное число — например, -webkit-transform: scaleX(-1) — произойдет «отзеркаливание» элемента.
Единственное числовое значение
Единственное числовое значение означает, что HTML-элемент масштабируется одновременно по обеим осям.
Например:
#gitverse_elem:hover {
transform: scale(1.5);
}
Масштаб HTML-элемента при наведении курсора увеличивается в 1.5 раза.
Два значения длины/процент
При использовании двух значений через запятую сначала указывают масштаб по оси X, а затем — по Y. В примере кода ниже HTML-element при наведении увеличивается по горизонтали в 2 раза, а по вертикали сохраняет дефолтные значения:
#gitverse_elem:hover {
transform: scale(2, 1);
}
Аналог — scaleX или scaleY.
Три значения длины/процент
Три значения <number> или <percentage> используются для 3D-элементов. К осям X и Y добавляют третью — Z.
scale(x,y,z)
Функция выступает аналогом scale3d() для трехмерного 3D-масштабирования.
#gitverse_elem:hover {
transform: scale(2, 1, 2);
}
none
Значение none указывает, что элемент не масштабируется. Также none отменяет transform, установленный для элемента из группы трансформируемых.
Примеры использования
CSS-функция изменяет визуальное отображение, но не трогает окружение.
Как еще можно масштабировать страницу?
Изменить визуальное представление элемента (повернуть, переместить), но не затронуть соседние помогут другие значения свойства transform. Это rotate, translate, skew и др.
Для трансформации используют backface-visibility, transform-box, transform-origin, perspective-origin.
CSS поддерживает базовые математические операции с использованием calc(). Это позволяет динамически масштабировать любой HTML-элемент и избавиться от ряда медиа-запросов.
Масштабировать любое свойство с числовым значением, основанным на ширине и высоте окна браузера (viewport height или viewport width), можно формулой:
calc([min size]px + ([max size] — [min size]) * ((100vw — [min vw width]px) / ([max vw width] — [min vw width])))
Поддержка браузерами
Браузеры обновляются, изменяются свойства и возможности CSS. Проверить совместимость можно в специальных сервисах. По данным caniuse.com, в декабре 2024 года функцию поддерживали почти 95% браузеров. Проблемы возникают в основном со старыми версиями: Chrome 4–103, Firefox 2–71, Safari 3.1–14.