transition-transform 必须搭配 transform: rotate() 才生效，因为 rotate 不是独立可过渡属性，仅 transform 整体可被 transition 驱动；需初始态和悬停态均声明 transform（如 rotate(0) 和 rotate(90deg)），且单位统一、函数顺序一致。
transition-transform 为什么必须搭配 transform: rotate() 才生效
直接写 transition: rotate 0.3s 是无效的——CSS 中没有 rotate 这个可过渡的属性。真正能被 transition 驱动的，只有 transform 这个整体属性，而 rotate() 只是它的一个函数值。
所以必须同时满足两个条件：
- 初始状态和目标状态都设置
transform，且至少一个含rotate() -
transition写在transform上，例如transition: transform 0.3s ease
常见错误：只在 hover 里加 transform: rotate(90deg)，但默认状态没写 transform: rotate(0)，导致部分浏览器（尤其是 Safari）过渡失效。
rotate() 的角度单位和方向怎么控制
rotate() 默认以元素中心为原点顺时针旋转，单位用 deg（度）、rad（弧度）或 turn（圈，1turn = 360deg）都可以，但必须保持单位一致，否则过渡会中断或跳变。
立即学习“前端免费学习笔记（深入）”；
如果想让旋转更符合直觉，注意这几点：
- 使用
transform-origin调整旋转中心，比如transform-origin: top left让左上角成为支点 - 逆时针旋转写负值：
rotate(-45deg) - 避免混用单位：
rotate(0.5turn)和rotate(180deg)在同一过渡中可能出问题 - 动画中若需多段旋转（如 0 → 90 → 180），建议用
@keyframes而非单纯transition
transition-timing-function 对旋转观感影响很大
旋转不是匀速运动，用 ease 或 cubic-bezier(.25,.1,.25,1) 会让起停更自然；但用 linear 容易显得机械生硬，尤其在小角度（如 ±10deg）翻转时特别明显。
几个实用组合：
- 图标按钮悬停旋转：用
ease-out，强调“落下”感 - 加载指示器连续旋转：不用
transition，改用animation: spin 1s linear infinite - 折叠面板箭头翻转（↓ → →）：用
ease-in-out，两端缓动更柔和
注意：如果旋转前后 transform 值类型不一致（比如从 rotate(0) 切到 scale(1.2) rotate(90deg)），浏览器可能无法插值，导致跳变——应始终让两处 transform 函数顺序、数量一致。
兼容性和硬件加速的隐藏坑
老版本 iOS Safari（transform 过渡有渲染毛刺，加 transform: translateZ(0) 或 will-change: transform 可触发 GPU 加速，但别滥用：
-
will-change: transform适合长期需要动画的元素（如导航菜单图标），不适合临时悬停 - 同时存在多个旋转元素时，过度使用
translateZ(0)可能增加图层数量，引发内存压力 - 不要对
:hover动态加will-change，它应在常态样式中声明 - IE11 不支持
transform的 transition（仅支持 filter 等少数属性），需降级为 JS 动画或放弃过渡
真正难调的不是写法，而是旋转中心偏移、单位混用、以及在复合 transform 中漏掉某个函数——这些都会让过渡看起来“卡一下”或者“闪一下”。
