transition 应限定为 transform 属性，如 transition: transform 0.3s ease；rotate() 需带单位（如 deg）、明确 origin，并配合 translatez(0) 或 will-change 提升性能。
transition 要作用在 transform 属性上，不能只写 all
直接写 transition: all 0.3s 看似省事，但实际中容易因其他属性（比如 color、opacity）意外触发重绘或影响性能。旋转动画应明确限定为 transform：
-
transition: transform 0.3s ease是更安全、更可预测的写法 - 如果同时有缩放+旋转，仍只需写
transform—— 浏览器会自动插值合并所有transform变化 - 避免用
transition: rotate 0.3s：css 中没有rotate这个独立属性，它只是transform的函数值
rotate() 的单位和方向必须写清楚
不写单位（如 rotate(90)）会导致无效；负号决定顺时针还是逆时针：
-
rotate(90deg)表示逆时针转 90 度（标准数学正方向） -
rotate(-90deg)是顺时针转 90 度 - 也可用
rad（弧度）、turn（圈数），例如rotate(0.25turn)等价于rotate(90deg) - 过渡起始态必须有明确的
transform: rotate(...)声明，不能依赖浏览器默认值（即没写 =rotate(0deg)，但显式写出更可靠）
hover 触发时元素突然跳动？检查 transform-origin
默认旋转中心是元素盒模型中心（transform-origin: 50% 50%）。如果视觉上像“甩出去”或偏移，大概率是原点位置不对：
- 想绕左上角旋转？加
transform-origin: 0 0 - 想绕底部中心？用
transform-origin: center bottom或50% 100% -
transform-origin本身也支持transition，但一般不建议过渡它——容易引发布局抖动 - 注意：
transform-origin的百分比值是相对于元素自身宽高，不是父容器
动画卡顿或闪烁？优先开启 will-change 或 GPU 加速
纯 CSS rotate() 在低端设备或复杂页面中可能掉帧。关键优化点：
立即学习“前端免费学习笔记（深入）”；
- 给旋转元素加
transform: translateZ(0)或will-change: transform，强制启用 GPU 合成层 - 慎用
will-change: transform：只对频繁变化的元素加，且最好在 hover 时才设置（避免长期占用资源） - 不要在
rotate()同时大量操作left/top等触发 layout 的属性，否则会抵消硬件加速效果 - 动画时间别低于
0.12s：太短人眼难感知，还可能被浏览器优化掉
过渡旋转真正麻烦的不是语法，而是 origin 定位、GPU 层级控制、以及和其他 transform 操作的叠加顺序——这些细节一错，效果就偏得离谱。