rotate

Baseline 2022

Newly available

Since August 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

rotate 属性允许你单独设置 transform 的旋转属性。这种映射方式可以让我们更方便的设置我们想要的效果，并且避免了简写形式需要记忆属性顺序的不方便之处。

语法

css

/* Keyword values */
scale: 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;

值

角度值: An <angle> specifying the angle to rotate the affected element through, around the Z axis. Equivalent to a rotate() (2D rotation) function.
x, y 或者 z 轴名称加上角度值: The name of the axis you want to rotate the affected element around ("x", "y", or "z"), plus an <angle> specifying the angle to rotate the element through. Equivalent to a rotateX()/rotateY()/rotateZ() (3D rotation) function.
向量加上角度值: Three <number>s representing an origin-centered vector that defines a line around which you want to rotate the element, plus an <angle> specifying the angle to rotate the element through. Equivalent to a rotate3d() (3D rotation) function.
none: 指定不应用旋转

形式语法

rotate = 
  none                                    |
  <angle>                                 |
  [ x | y | z | <number>{3} ] && <angle>

示例

HTML

html

<div>
  <p class="rotate">Rotation</p>
</div>

CSS

css

* {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
}

div {
  width: 150px;
  margin: 0 auto;
}

p {
  padding: 10px 5px;
  border: 3px solid black;
  border-radius: 20px;
  width: 150px;
  font-size: 1.2rem;
  text-align: center;
}

.rotate {
  transition: rotate 1s;
}

div:hover .rotate {
  rotate: 1 -0.5 1 180deg;
}

结果

规范

Specification
CSS Transforms Module Level 2 # individual-transforms

初始值	`none`
适用元素	可变换元素
是否是继承属性	否
计算值	as specified
动画类型	a transform
Creates stacking context	是

浏览器兼容性

BCD tables only load in the browser