旋转属性
最后更新：2026-09-13
rotate 旋转属性
rotate 是 transform 的一个独立属性，用于让元素围绕指定轴进行 2D 或 3D 旋转。作为独立属性，它可以与 translate、scale 等其他变换分开控制，特别适合需要单独动画化旋转角度的交互场景。
| 分类 | |
|---|---|
| 初始值 | none |
| 继承 | 否 |
| 适用于 | |
| 可动画 | |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
rotate: none | <angle> | [ x | y | z | <number>{3} ] <angle>;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
none | 关键字 | 无旋转 |
<angle> | 类型 | 旋转角度 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| rotate | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| 所有主流浏览器均支持 | |||||
提示： 不指定轴时默认绕 Z 轴（垂直于屏幕）旋转；可指定 x、y、z 轴或自定义向量实现 3D 旋转。
提示： 正值按顺时针方向旋转（视角看向轴的正方向时），负值则逆时针旋转。
❓ 常见问题
Q如何让元素来回摆动而不是连续旋转？
A让动画在正反向之间往返播放：animation-direction: alternate，并写出两个关键帧，例如 from 为 rotate: -10deg、to 为 rotate: 10deg。只写 to 时，0% 自动取元素初始状态。也可用 transition 配合 JS 反复切换类名实现。
Qrotate 和 transform: rotate() 效果一样吗？
A视觉效果完全一样，都是围绕指定轴旋转。区别在于独立属性 rotate 可以单独被动画化，不影响 transform 中已有的 translate、scale 等其他变换，适合按维度分别控制；transform: rotate() 必须和 transform 的其他函数写在同一个列表里，改动时要注意函数的顺序。
Qrotate 的旋转轴有哪些？如何绕 X/Y 轴旋转？
A不写轴时默认绕 Z 轴（垂直屏幕）旋转，相当于 rotateZ。绕 X 轴用 rotate: x 45deg，绕 Y 轴用 rotate: y 45deg，也可指定自定义向量 rotate: 1 1 0 45deg。绕 X/Y 轴旋转需父元素设置 perspective 才能看到立体效果。
Qrotate 支持负角度和超过 360 度的角度吗？
A支持。rotate: -45deg 表示逆时针旋转 45 度；超过 360 度的值如 720deg 在动画中表现为转两圈。角度单位支持 deg、grad、rad、turn，例如 0.25turn 等于 90deg。注意静态样式下 360deg 与 0deg 效果相同，但用于动画时旋转过程会完整呈现。
🏷️ 相关属性
💡 相关案例
📚 相关教程
