transition 对 transform:rotate 无反应是因为未触发属性值变化，需通过 class 切换、:hover 或 JS 修改 style.transform；持续旋转应使用 @keyframes + animation，并设 linear 和 infinite。
transition 为什么对 transform:rotate 没反应？
常见错误是直接给元素写 transition: all 0.3s 却发现旋转不动——本质是没触发重绘。CSS 动画需要「属性值变化」，而 transform: rotate(0deg) 到 transform: rotate(360deg) 这类静态声明不会自动播放。
- 必须通过 class 切换、伪类（如
:hover）或 JS 修改style.transform来触发变化 -
transition只监听「数值变化」，不监听「动画循环」；想持续转，得用@keyframes+animation - 若用 JS 控制，避免反复设
element.style.transform = 'rotate(' + deg + 'deg)'，性能差；优先用transform: rotate(var(--r))配合style.setProperty('--r', deg)
用 animation 实现平滑无限旋转加载图标
加载图标本质是「无限、匀速、无闪动」的旋转，animation 比手动控制 transition 更可靠。关键在 timing-function 和 iteration-count。
- 必须写
animation-iteration-count: infinite，否则只转一圈就停 - 用
linear而非ease，避免启停顿感；ease在 0% 和 100% 处减速，人眼明显察觉卡顿 - 推荐从
0deg→360deg，别用-360deg，某些旧版 Safari 对负角度解析异常
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.loading {
animation: spin 1s linear infinite;
}
IE11 或低版本 Edge 下 rotate 不生效？
老浏览器对 transform 支持不全，尤其缺失对 rotate() 的独立支持，或 require 前缀。不是 bug，是标准演进遗留问题。
- 必须加
-ms-transform前缀（IE10–11），仅transform不够 - 不要依赖 Autoprefixer 自动补全——它默认已移除 IE10–11 前缀，需显式配置
browserslist包含IE 11 - 若项目已放弃 IE，但用户仍偶发白屏，检查是否误用了
will-change: transform，IE11 对此支持极差，直接删掉
旋转图标在高 DPI 屏幕上边缘发虚？
这是 subpixel rendering 导致的抗锯齿偏差，和旋转中心点、像素对齐有关，不是代码写错。
立即学习“前端免费学习笔记（深入）”；
- 强制开启硬件加速：加
transform: rotate(0deg) translateZ(0)，让浏览器走 GPU 渲染路径 - 确保旋转元素宽高为偶数像素，奇数宽高 + 旋转易导致半像素偏移
- 避免用
border画圆环，改用box-shadow或 SVG；border-radius: 50%在缩放后失真更明显
rotate(0deg)），否则动画循环衔接处会有跳变——这比性能问题更影响观感。 
