Функция scaleX()

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

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

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

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

Синтаксис

transform: scaleX(<число>)
Описание Пример
<тип> Указывает тип значения. <размер>
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: scaleX({{ playgroundValue }});
}

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

CSS Transforms Module Level 1

Браузеры

9 12 4 11.5 3.1 3.5
2.1 3.5 12 3.2

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

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

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