旋转平滑的关键是正确设置transition和transform：需为元素定义初始transform: rotate(0deg)，过渡属性明确写为transition: transform 0.3s ease，避免使用all；角度统一用0deg→360deg防插值错误；连续旋转应使用@keyframes动画而非transition。
用 transition 配合 transform: rotate()
直接加 transition 就行，但必须作用在触发悬停的元素本身，且过渡属性要明确写成 transform，不能用 all —— 否则可能意外触发其他属性的过渡，拖慢响应或引发闪烁。
-
transition: transform 0.3s ease;是最稳妥的写法 - 别写
transition: all 0.3s;，尤其当元素还带opacity或color变化时，容易让旋转卡顿 - 起始状态（非 hover）也要定义
transform: rotate(0deg);，否则首次 hover 会从“无 transform”跳变，过渡不生效
button {
transform: rotate(0deg);
transition: transform 0.3s ease;
}
button:hover {
transform: rotate(360deg);
}
为什么 hover 时旋转卡顿或闪一下
常见原因是没设初始 transform，或者用了 transform: rotate(360deg) 以外的值（比如 rotate(720deg)）导致浏览器插值方向判断出错——它可能选逆向转 -360° 而不是正向 360°。
- 统一用
0deg → 360deg或0 → 1turn，避免角度歧义 - 如果想实现“每次 hover 都顺时针转一圈”，别依赖状态叠加，用
@keyframes+animation更可靠 -
硬件加速能改善性能：给元素加
transform: translateZ(0);或will-change: transform;（慎用will-change，仅对高频交互元素）
需要连续旋转（比如 loading 图标）怎么办
transition 只适用于状态切换，没法自动循环。得换 @keyframes + animation。
- 动画定义里用
rotate(0deg) → rotate(360deg)，animation-iteration-count: infinite; - 悬停时控制启停：默认
animation-play-state: paused;，:hover里设为running - 注意：
animation和transition同时存在时，动画优先级更高，transform过渡会被覆盖
@keyframes spin {
to { transform: rotate(360deg); }
}
.loading {
animation: spin 1s linear infinite;
animation-play-state: paused;
}
.loading:hover {
animation-play-state: running;
}
旋转是否平滑，关键不在角度数值，而在过渡是否被正确触发、是否受其他样式干扰、以及是否意外禁用了 GPU 加速。真遇到卡顿，先检查 DevTools 的 Rendering 面板里有没有“Paint flashing”高频触发——那往往说明你误触了重排或重绘。 
