Свойство transform стиля

Определение и использование

transform Свойство transform applies 2D or 3D transformations to an element. This property allows you to rotate, scale, move, skew, and more elements.

Дополнительные источники:

Руководство по CSS:Атрибут transform

Пример

Поворот элемента div:

document.getElementById("myDIV").style.transform = "rotate(7deg)";

Попробуйте сами

Грамматика

Вернуть атрибут transform:

object.style.transform

Установить атрибут transform:

object.style.transform = "none|transform-functions|initial|inherit"

Значение атрибута

Значение Описание
none Определяет, что преобразование не должно быть.
matrix(n, n, n, n, n, n) Использует матрицу с шестью значениями для определения двумерного преобразования.
matrix3d(n, n, n, n, и т.д....) Использует 4x4-матрицу с 16 значениями для определения 3D-преобразования.
translate(x, y) Определяет 2D-перемещение.
translate3d(x, y, z) Определяет 3D-перемещение.
translateX(x) Определяет перемещение, используя только значение X-оси.
translateY(y) Определяет перемещение, используя только значение Y-оси.
translateZ(z) Определяет 3D-перемещение, используя только значение Z-оси.
scale(x, y) Определяет 2D-пропорциональное преобразование
scale3d(x, y, z) Определяет 3D-пропорциональное преобразование.
scaleX(x) Определяет пропорциональное преобразование, используя значение X-оси.
scaleY(y) Определяет пропорциональное преобразование, используя значение Y-оси.
scaleZ(z) Определяет 3D-пропорциональное преобразование, используя значение Z-оси.
rotate(angle) Определяет 2D-вращение, в параметрах указывается угол.
rotate3d(x, y, z, angle) Определяет 3D-вращение.
rotateX(angle) Определяет 3D-вращение по оси X.
rotateY(angle) Определяет 3D-вращение по оси Y.
rotateZ(angle) Определяет 3D-вращение по оси Z.
skew(x-angle, y-angle) Определяет 2D-скручивание по осям X и Y.
skewX(angle) Определяет 2D-скручивание по оси X.
skewY(angle) Определяет 2D-скручивание по оси Y.
perspective(n) Определяет перспективу 3D-элемента.
initial Этот атрибут устанавливается в его значение по умолчанию. См. initial.
inherit Этот атрибут наследуется из родительского элемента. См. inherit.

Технические детали

Значение по умолчанию: Нет
Возвратное значение: Строка, представляющая Атрибут transform.
Версия CSS: CSS3

Поддержка браузера

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
36.0 10.0 16.0 9.0 23.0