rotate

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since August 2022.

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