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.

Браузери