CSS旋转动画必须作用于transform属性而非rotate()函数，需配合@keyframes定义、animation-fill-mode: forwards保持终态，并优先使用transform实现高性能动画。
rotate() 是 transform 的一部分，不能单独用作动画属性
很多人刚接触时会以为 rotate() 本身就能触发动画，结果写成 animation: spin 2s; 却没定义 @keyframes spin，或者直接在元素上写 transform: rotate(90deg); 期望它自动动起来——这不会生效。CSS 动画必须作用于可动画化的属性，而 transform 是，rotate() 只是它的函数值。
正确做法是：在 @keyframes 中修改 transform: rotate(...)，并确保目标元素已声明 transform 初始值（哪怕为 rotate(0deg)），否则部分浏览器可能跳过首帧。
- 必须用
transform作为动画属性，不是rotate -
rotate(360deg)和rotate(0deg)在视觉上等价，但动画中写成0deg → 360deg才能完整转一圈；写成0deg → 720deg会转两圈 - 避免只写
rotate(90)—— 缺少单位（如deg、rad或turn）会导致整个声明失效
让旋转停在终点而不是回弹，得用 animation-fill-mode
默认情况下，CSS 动画播放完会恢复到动画前的样式状态。比如一个图标从 rotate(0deg) 转到 rotate(180deg)，动画一结束就“啪”地弹回原位。这不是 bug，是默认行为。
要让它停在最后一帧，必须加 animation-fill-mode: forwards;。这个设置不会影响动画过程，只控制动画结束后元素保留哪一帧的样式。
立即学习“前端免费学习笔记（深入）”；
-
forwards表示保持@keyframes最后一个关键帧的样式 - 如果同时设置了初始
transform（比如transform: rotate(45deg);），又没用forwards，动画播完就会回到那个初始值，而不是最后的180deg - 注意：
forwards不会覆盖transform的其他值，比如你用了transform: scale(1.2) rotate(0deg);，动画里只改rotate，那forwards也只保留旋转部分，scale仍生效
用 rotateZ() 和 rotate3d() 控制旋转轴与立体感
二维页面里 rotate() 默认等价于 rotateZ()，绕 Z 轴（垂直于屏幕）转。但有时需要倾斜、翻转或伪 3D 效果，就得换函数。
rotateX() 和 rotateY() 会让元素看起来像在上下/左右翻页；rotate3d(x, y, z, a) 更灵活，比如 rotate3d(1, 1, 0, 45deg) 表示绕向量 (1,1,0) 旋转 45 度——适合做斜向翻转。
- 启用 3D 效果前，父容器最好加
transform-style: preserve-3d;，否则子元素的 3D 变换会被拍平 - 想让旋转有透视感，给祖先元素加
perspective: 800px;（值越小，近大远小越明显） -
rotateZ(90deg)和rotate(90deg)效果一致，但显式写Z更利于团队理解意图
性能敏感场景下，rotate 动画要避免触发布局重排
只要只改 transform（包括 rotate）和 opacity，浏览器就能走合成层（compositor），不触发 layout 和 paint，帧率更稳。但一旦混入 left、top、width 等属性，整条流水线就降级了。
常见踩坑点：用 margin 或 padding 配合旋转做“晃动”效果；或在动画中动态改 font-size 导致文字重排；甚至用 visibility: hidden 切换显示却忘了它不触发重绘优化。
- 检查 DevTools 的 Rendering 面板 → 勾选 “Paint flashing”，看旋转时是否大面积闪烁（说明在重绘）
- 用
will-change: transform;提前提示浏览器该元素将变化，但别滥用——每个都加反而拖慢初始化 - 如果旋转元素含大量子内容（比如带图片列表的轮播图），考虑用
transform: rotate(...) translateZ(0);强制升层，但需测试移动端兼容性
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.rotating {
animation: spin 1.2s ease-in-out infinite;
animation-fill-mode: forwards;
}
旋转动画真正难的不是写法，而是判断什么时候该用 rotateZ、什么时候该切到 rotate3d，以及在复杂 DOM 结构里守住合成层不被意外破坏。 
