transform

transform

Трансформирует элемент, в частности, позволяет его масштабировать, вращать, сдвигать, наклонять, а также комбинировать виды трансформаций, перечисляя функции трансформации через пробел.

Краткая информация

Синтаксис

transform: <функция> [<функция>]* | none

Значения

Функции трансформации

matrix

Задаёт двумерную матрицу преобразований.

matrix3d

Задаёт трёхмерную матрицу преобразований.

rotate()

Поворачивает элемент в двумерном пространстве на заданный угол относительно точки трансформации, задаваемой свойством transform-origin.

rotateX()

Поворачивает элемент на заданный угол относительно оси X.

rotateY()

Поворачивает элемент на заданный угол относительно оси Y.

rotateZ()

Поворачивает элемент на заданный угол относительно оси Z.

rotate3d

Поворачивает элемент в трёхмерном пространстве.

scale()

Масштабирует элемент по горизонтали и вертикали.

scaleX()

Масштабирует элемент по горизонтали.

scaleY()

Масштабирует элемент по вертикали.

scaleZ()

Масштабирует элемент по оси Z.

scale3d

Масштабирует элемент в трёхмерном пространстве.

skew()

Наклоняет элемент на заданный угол по горизонтали и вертикали.

skewX()

Наклоняет элемент на заданный угол по горизонтали.

skewY()

Наклоняет элемент на заданный угол по вертикали.

translate()

Сдвигает элемент на заданное значение по горизонтали и вертикали.

translateX()

Сдвигает элемент по горизонтали на указанное значение. Положительное значение сдвигает вправо, отрицательное влево.

translateY()

Сдвигает элемент по вертикали на указанное значение. Положительное значение сдвигает вниз, отрицательное вверх.

translateZ()

Сдвигает элемент по оси Z на указанное значение. Положительное значение сдвигает вперёд, отрицательное назад.

translate3d

Сдвигает элемент на заданное значение в трёхмерном пространстве

perspective()

Задаёт перспективу.

Пример

В данном примере при наведении курсора на изображение оно поворачивается на 15 градусов по часовой стрелке.

Объектная модель

Объект.style.transform

Примечание

Internet Explorer 9 поддерживает свойство -ms-transform.

Chrome до версии 36, Safari до версии 9, Opera до версии 23 и Android поддерживают свойство -webkit-transform.

Opera до версии 12.1 и с версии 15 до 23 поддерживает свойство -o-transform.

Firefox до версии 16 поддерживает свойство -moz-transform.

Браузеры