rotate

描述

rotate CSS 属性允许您独立于 transform 属性单独指定旋转变换。这可以更好地映射到典型的用户界面用法，并且无需记住在 transform 属性中指定的转换函数的确切顺序。

效果展示

语法

/* 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 value <angle> 指定受影响元素绕 Z 轴旋转的角度。相当于 rotate() （2D 旋转）函数。
• x, y, or z axis name plus angle value 您想要围绕其旋转受影响元素的轴的名称（ "x" 、“ y ”或“ z" ”），加上 <angle> / rotateY() / rotateZ() （3D 旋转）函数。
• vector plus angle value 三个 <number> 表示以原点为中心的向量，该向量定义要绕其旋转元素的线，再加上一个 <angle> 指定要旋转元素的角度。相当于 rotate3d() （3D 旋转）函数。
• none 这是描述指定不应应用旋转。