button:hover 里 rotate() 不生效的三大原因：disabled 属性屏蔽 hover、内联元素未设 display: inline-block 导致 transform 失效、css 优先级被更具体选择器覆盖；font awesome 图标跳动因 baseline 对齐，需设 display: inline-block 和 transform-origin: center；safari 动画跳变需写全 from/to 帧并带 deg 单位。
button:hover 里 rotate() 不生效？先看这三点
不是代码写错了，而是 hover 没触发或 transform 没生效。常见现象：button:hover { transform: rotate(360deg); } 写对了但图标纹丝不动。
- 按钮加了
disabled属性——disabled会直接屏蔽:hover，改用data-state="loading"+ class 切换 - 图标是内联元素（比如
<i class="fa-solid fa-sync"></i>），没设display: inline-block或vertical-align: middle，导致transform失效或对齐错位 - CSS 优先级被覆盖：比如写了
.btn:hover，但页面里同时存在更具体的button.primary:hover，后者会赢——用开发者工具检查 computed styles 看最终生效的是哪条
Font Awesome 图标旋转时上下跳动怎么修
字体图标默认按文本基线（baseline）对齐，rotate() 绕 baseline 转，视觉上“抖”。这不是动画问题，是排版问题。
- 给图标元素加
display: inline-block（别用inline） - 显式设置
transform-origin: center，别依赖默认值 - 避免
font-display: swap——字体加载完成前图标位置不稳，改用font-display: block或直接切内联 SVG - 如果必须用 Font Awesome，加
line-height: 1和margin-top: -2px微调（仅作临时补救）
Safari 上旋转动画“啪”一下跳回原位
旧版 Safari（≤15.6）解析 @keyframes 不完整，只写 to { transform: rotate(360deg); } 会导致循环起点重置。
- 必须写全起止帧：
from { transform: rotate(0deg); } to { transform: rotate(360deg); } - 更稳妥用百分比：
0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } - 单位不能省——
rotate(0)在某些 Safari 版本里被当成rotate(0rad)，角度计算失效，一律写deg - 动画时长别低于
0.4s，太短易卡顿；用linear而非ease，避免速度不均引发跳变
disabled 状态下图标还在转？还是停了？都不是最优解
浏览器规范规定：button[disabled] 会冻结所有子元素的 CSS 动画，包括 animation: spin 1s infinite。这不是 bug，是预期行为，但体验差。
- 不要用
disabled控制 loading 状态，改用data-state="loading"+ class 切换 - 禁用交互用
pointer-events: none，再配opacity: 0.6视觉反馈，这样动画仍可运行 - 若必须用
disabled，需 JS 手动恢复动画：iconEl.style.animationPlayState = "running" - 真正难调的不是旋转本身，是它夹在字体加载、禁用逻辑、GPU 层切换和可访问性之间——每个环节松动一点，整体就飘
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
