Функция scaleY()

Стилевая функция scaleY() масштабирует элемент по вертикальной оси Y.

scaleY(s) соответствует scale(1, s).

Масштабирование с помощью scaleY(s) продемонстрировано в табл. 1.

Табл. 1. Масштабирование картинки
transform: scaleY(1) Исходное изображение.
transform: scaleY(1.2) Увеличение масштаба по вертикали в 1,2 раза.
transform: scaleY(0.5) Уменьшение масштаба по вертикали в два раза.
transform: scaleY(-1) Зеркальное отражение по вертикали.
transform: scaleY(-0.5) Зеркальное отражение и уменьшение масштаба по вертикали.

Синтаксис

transform: scaleY(<число>)
Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
# Повторять один или больше раз через запятую. <время>#

Значения

В качестве значения используется положительное или отрицательное число.

  • значение больше 1 (например: 1.5) приводит к увеличению масштаба;
  • значение меньше 1 (например: 0.8) приводит к уменьшению масштаба;
  • отрицательное значение (например: -1) зеркально отражает элемент по вертикали;
  • значение 1 оставляет размер элемента исходным и не даёт видимого эффекта.

Песочница

img {
  transform: scaleY({{ playgroundValue }});
}

Спецификация

CSS Transforms Module Level 1

Браузеры

9 12 4 11.5 3.1 3.5
2.1 3.5 12 3.2

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.