rotate

基线 2022

新发布

自 2022 年 8 月起，此功能可在最新的设备和浏览器版本中使用。此功能可能无法在旧设备或浏览器中使用。

rotate CSS 属性允许你分别独立于 transform 属性指定旋转变换。这更符合典型的用户界面使用方式，并且避免了记住在 transform 属性中指定变换函数的确切顺序。

试试看

语法

css

/* 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"），加上一个 <angle>，指定元素旋转的角度。等效于 rotateX()/rotateY()/rotateZ()（3D 旋转）函数。
向量加上角度值: 三个 <number>，表示一个以原点为中心的向量，该向量定义了你想要围绕其旋转元素的直线，加上一个 <angle>，指定元素旋转的角度。等效于 rotate3d()（3D 旋转）函数。
none: 指定不应用任何旋转。

正式定义

初始值	`none`
应用于	可变换元素
继承	否
计算值	如指定
动画类型	变换
创建堆叠上下文	是

正式语法

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

示例

在悬停时旋转元素

以下示例展示了如何使用 rotate 属性在悬停时沿各种轴旋转元素。第一个盒子在悬停时围绕 Z 轴旋转 90 度，第二个盒子在悬停时围绕 Y 轴旋转 180 度，第三个盒子在悬停时围绕由坐标定义的向量旋转 360 度。

HTML

html

<div class="box" id="box1">rotate Z</div>
<div class="box" id="box2">rotate Y</div>
<div class="box" id="box3">vector & angle</div>

CSS

css

.box {
  display: inline-block;
  margin: 1em;
  min-width: 6.5em;
  line-height: 6.5em;
  text-align: center;
  transition: 1s ease-in-out;
  border: 0.25em dotted;
}

#box1:hover {
  rotate: 90deg;
}

#box2:hover {
  rotate: y 180deg;
}

#box3:hover {
  rotate: 1 2 1 360deg;
}

结果

规范

规范
CSS 变换模块级别 2 # individual-transforms

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载。

参见

注意：skew 不是独立的 transform 值