Преобразование элемента: transform

transform

Поддержка браузерами
Настольные браузеры Chrome Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка, версии браузеров 36 3.5 (1.9.1) -moz- 9.0 -ms- 10.5 -o- 3.1 -webkit-
Мобильные браузеры Android IE Phone Opera Mobile Safari Mobile
Базовая поддержка, версии браузеров 2.1 -webkit- 11.0 -webkit- 11.5 -webkit- 3.2 -webkit
Свойство
transform — это свойство задает преобразование для элемента
Наследование
Не наследуется. Это значит что стили применённые к родительскому элементу не передадутся потомкам
Применяется
К элементам, к которым применено свойство display со значениями block, inline-block или inline-table или у которых данные значения являются по умолчанию, а также к элементам img и canvas
Может принимать значения
none | rotate(значение угла) | translate(смещение) | scale(масштабирование) | skew(наклон) | inherit
Значение по умолчанию
none
Правила записи
Для функции rotate()
— transform: rotate(значение угла в градусах);

  • допускается отрицательное значение

Для функции translate()
— transform: translateX(смещение по оси X);
или

transform: translateY(смещение по оси Y) или

transform: translate(смещение_по_X, смещение_по_Y)

  • допускается отрицательное значение
  • если указано только одно значение у функции translate, то оно будет задано для оси X, ось Y получит значение 0

Для функции scale()
— transform: scaleX(масштабирование по горизонтали);
или

transform: scaleY(масштабирование по вертикали); или

transform: scale(масштабирование по горизонтали, масштабирование по вертикали)

  • в качестве значения масштабирования используется число, оно работает как коэффициент, например, если стоит значение 2, то это значит что размер увеличится в 2 раза, если стоит значение 0.5, то это значит что размер уменьшится в 2 раза
  • если указано только одно значение у функции scale, то для второго значения будет применен такой же коэффициент

Для функции skew()
— transform: skewX(наклон по горизонтали);
или

transform: skewY(наклон по вертикали); или

transform: skew(наклон по горизонтали, наклон по вертикали)

  • допускается отрицательное значение
  • если указано только одно значение у функции skew, то оно будет задано для оси X, ось Y получит значение 0

Также существует возможность объединить все функции в одном свойстве transform, для этого нужно перечислить их через пробел:
transform: rotate() translate() scale() skew();

  • порядок следования важен, так как функции будут использоваться в том порядке в котором они заданы
Примеры

Абзац смещен по горизонтали на 30px

kubism

Масштаб по горизонтали увеличен в 1.5 раза

Масштаб по вертикали уменьшен в 0.8 раза

По оси X наклон 15 градусов

По оси Y наклон -2 градуса

По оси X наклон -1 градус, по оси Y наклон 1 градус

У этого абзаца: поворот на 2 градуса; смещение на 5px по оси X и на 7px по оси Y; масштаб по горизонтали увеличен в 1.2 раза, по вертикали увеличен в 1.3 раза ;по оси X наклон -1 градус, по оси Y наклон 1 градус

Это означает что свойство унаследует значение от родителя

Поделиться