Свойство применяет к элементу двухмерное или трехмерное преобразование. Позволяет вращать, масштабировать, перемещать, наклонять элементы.
Примеры
transform: rotate(20deg);
font-style: oblique;
transform: scaleY(1.5);
Значения
Значение | Описание |
---|---|
none | Убирает трансформацию. |
matrix(n,n,n,n,n,n) | Определяет 2D-преобразование, используя матрицу из шести значений. |
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | Определяет трехмерное преобразование, используя матрицу 4×4 из 16 значений. |
translate(x,y) | Сдвигает элемент на заданное значение по горизонтали и вертикали. |
translate3d(x,y,z) | Сдвигает элемент на заданное значение в трёхмерном пространстве. |
translateX(x) | Сдвигает элемент по горизонтали. Положительное значение сдвигает вправо, отрицательное – влево. |
translateY(y) | Сдвигает элемент по вертикали. Положительное значение сдвигает вниз, отрицательное – вверх. |
translateZ(z) | Сдвигает элемент по оси Z. Положительное значение сдвигает вперёд, отрицательное – назад. |
scale(x,y) | Масштабирует элемент по горизонтали и вертикали. |
scale3d(x,y,z) | Масштабирует элемент в трехмерном пространстве. |
scaleX(x) | Масштабирует по горизонтали. |
scaleY(y) | Масштабирует по вертикали. |
scaleZ(z) | Масштабирует по оси Z. |
rotate(<угол>) | Поворачивает элемент в 2D-пространстве на заданный угол относительно точки трансформации, задаваемой свойством transform-origin. |
rotate3d(x,y,z,<угол>) | Поворачивает элемент в 3D-пространстве. |
rotateX(<угол>) | Поворачивает элемент на заданный угол относительно оси X. |
rotateY(<угол>) | Поворачивает элемент на заданный угол относительно оси Y. |
rotateZ(<угол>) | Поворачивает элемент на заданный угол относительно оси Z. |
skew( | Наклоняет элемент на заданный угол по горизонтали и вертикали. |
skewX(<угол>) | Наклоняет элемент на заданный угол по горизонтали. |
skewY(<угол>) | Наклоняет элемент на заданный угол по вертикали. |
perspective(n) | Задает перспективу. |
inherit | Наследует значение родительского блока. |
initial | Устанавливает значение по умолчанию. |
Поддержка браузерами
НастольныеМобильные
transform
36
1 -webkit-
12
12 -webkit-
16
49 -webkit-
44 -webkit-
10
11 -webkit-
9 -ms-
23
15 -webkit-
12.1-15
10.5-15 -o-
9
3.1 -webkit-
36
18 -webkit-
16
49 -webkit-
44 -webkit-
24
14 -webkit-
12.1-14
11-14 -o-
9
3.2 -webkit-
3.0
1.0 -webkit-
37
2 -webkit-
3D support
12
12
16
10
15
4
18
16
14
3.2
1.0
3 -webkit-
Поддерживается: Да Нет Пользователь должен включить