必须添加transition声明才能实现平滑旋转，推荐在常态规则中设置transform 0.3s ease-in-out；通过transform-origin调整旋转中心点；用translateZ(0)触发硬件加速避免卡顿。
为什么 transform: rotate() 悬停时不转或卡顿
直接写 :hover { transform: rotate(180deg); } 通常没动画——因为缺少过渡声明。CSS 不会自动补全动画，必须显式告诉浏览器“哪个属性要过渡”“用什么缓动”“持续多久”。
必须加 transition 才能平滑旋转
只对 transform 设置过渡，避免影响其他属性；推荐用 transform 0.3s ease-in-out，比 all 0.3s 更精准、性能更好。
-
transition要写在**常态规则里**（非:hover），否则首次悬停无过渡 - 别用
ease或linear——ease-in-out起止更自然，适合图标旋转 - 时间选
0.2s–0.4s最稳妥；太短像闪，太长显得迟钝
icon {
display: inline-block;
transition: transform 0.3s ease-in-out;
}
icon:hover {
transform: rotate(180deg);
}旋转中心点偏移导致视觉错位
默认以元素中心点旋转，但图标常靠左/靠上对齐，结果看起来像“晃动”而非原地转。用 transform-origin 锁定旋转锚点。
- 图标居中时：保持默认
transform-origin: center - 图标贴左：改用
transform-origin: left center - 纯 SVG 图标可直接设
transform-origin: 50% 50%，兼容性更稳
硬件加速失效导致掉帧
某些浏览器（尤其旧版 Safari 或移动端 WebView）对 rotate() 不触发 GPU 加速，滚动或悬停时掉帧。加 translateZ(0) 强制启用。
立即学习“前端免费学习笔记（深入）”；
icon {
transition: transform 0.3s ease-in-out;
transform: translateZ(0); /* 触发硬件加速 */
}
icon:hover {
transform: rotate(180deg) translateZ(0);
}注意：不要只加在 :hover 里，常态也要有 translateZ(0)，否则切换时仍有跳变。
