正确做法是将 transition 写在默认选择器上，如 icon { transition: transform 0.3s ease; }，hover 时仅修改 transform 值；需注意单位（用 deg）、transform-origin、easing 和兼容性。
hover 时用 transform: rotate() 配合 transition 就能转，但别直接写在 :hover 里加 transition
直接在 :hover 规则里加 transition 会导致鼠标移入瞬间有延迟、移出时动画不触发——因为初始状态没声明 transition，浏览器只对「变化的属性」做过渡，而移出时从 hover 态切回默认态，若默认态没定义 transition，就直接跳变。
正确做法是把 transition 写在默认（非 hover）选择器上：
icon {
transition: transform 0.3s ease;
}
icon:hover {
transform: rotate(90deg);
}
-
transform是可过渡属性，但rotate()只是它的值，真正起作用的是transform整个属性 - 别写
transition: all 0.3s—— 会意外过渡其他属性（比如 color 或 opacity），增加重绘开销 - 如果图标是 inline 元素（如
<i class="icon"></i>），确保它有display: inline-block或display: block，否则transform在部分浏览器中可能不生效
rotate() 的角度单位和方向容易搞反
rotate(90deg) 是顺时针，rotate(-90deg) 才是逆时针——这个负号漏掉，动画看起来就像“卡住”或“往回抽”。另外，rotate(1turn) 等价于 rotate(360deg)，但某些旧版 Safari 对 turn 单位支持不稳定，生产环境建议统一用 deg。
- 常见错误：写成
rotate(90)（漏掉deg）→ 浏览器忽略该声明，无动画 - 如果想让图标转半圈再回来，别用
rotate(180deg)+rotate(0)切换，而是保持同一轴心，靠transform-origin控制旋转中心点（默认是中心，但图标若不对称，可能看起来偏移） -
transform-origin: center最安全；若图标是左对齐文字旁的 icon，有时需设为transform-origin: left center
transition 时间太短或 easing 不匹配，动画像“弹”而不是“转”
小于 0.15s 的 transition 人眼难感知过程，容易误判为失效；大于 0.5s 又显得拖沓。标准交互反馈建议用 0.25s–0.35s，easing 推荐 ease-out 或 cubic-bezier(0.34, 1.56, 0.64, 1)（轻微 overshoot，更灵动）。
立即学习“前端免费学习笔记（深入）”；
- 别用
linear——匀速旋转在 UI 中显得机械，缺乏反馈感 - 如果多个图标同时 hover，又都用了相同
transition，注意避免集体触发重排；可给每个加微小延迟差（如transition-delay: 0.02s），但仅限装饰性场景 - 动画过程中若父容器发生 layout 变化（比如高度塌陷、flex 重排），
transform动画可能中断或跳帧——确保父级尺寸稳定
IE 和老 Android WebView 不支持 transform 的某些写法
IE10+ 支持 transform，但需要 -ms-transform 前缀；Android 4.3 及以下 WebView 对 transform: rotate() 支持不全，尤其配合 inline 元素时。不是所有项目都要兼容，但如果你的用户仍有大量钉钉/企业微信内置浏览器（基于旧版 UC 或 X5 内核），就得小心。
- 加前缀不是万能的：
-webkit-transform在 iOS 12+ 和现代 Android 已不需要，但保留也无害；-ms-transform在 IE11 中仍需 - 测试关键路径：用真机打开页面，悬停后快速移入移出 3 次，看是否偶发不触发或卡在中间角度
- 如果必须保兼容且效果优先，可降级为用
@keyframes+animation，但要手动控制animation-fill-mode: forwards和 hover 事件绑定，复杂度明显上升
真正麻烦的不是怎么写 rotate，而是当图标嵌在按钮里、又被 JS 动态增删 class、同时还要响应点击态时，transform 和 transition 的优先级、重绘时机、以及是否被其他 CSS 覆盖——这些地方一碰就出问题，得靠 DevTools 的 “Rendering” 面板逐帧看 actual paint。
