rotate

Свойство rotate позволяет задавать преобразования поворота индивидуально и независимо от свойства преобразования.

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

Демо

Трансформации

• backface-visibility
• perspective
• perspective-origin
• rotate
• scale
• transform
• transform-box
• transform-origin
• transform-style

Синтаксис

/* Keyword values */
rotate: none;

/* Angle value */
rotate: 90deg;
rotate: 0.25turn;
rotate: 1.57rad;

/* x, y, or z axis name plus angle */
rotate: x 90deg;
rotate: y 0.25turn;
rotate: z 1.57rad;

/* Vector plus angle value */
rotate: 1 1 1 90deg;

/* Global values */
rotate: inherit;
rotate: initial;
rotate: revert;
rotate: revert-layer;
rotate: unset;

Значения

<значение угла>

<angle>, определяющий угол поворота затронутого элемента вокруг оси Z. Эквивалент функции rotate() (2D-вращение).

имя оси x, y или z плюс значение угла

Имя оси, вокруг которой вы хотите повернуть затронутый элемент ("x", "y" или "z"), плюс <угол>, указывающий угол, на который нужно повернуть элемент. Эквивалент функции rotateX()/rotateY()/rotateZ() (трехмерное вращение).

вектор плюс значение угла

Три <number>, представляющие вектор с центром в начале координат, который определяет линию, вокруг которой вы хотите повернуть элемент, плюс <angle>, указывающий угол, на который нужно повернуть элемент. Эквивалент функции rotate3d() (трехмерное вращение).

none

Указывает, что вращение не должно применяться.

Спецификация

• CSS Transforms Module Level 2

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

Комментарии