transition 不能直接触发 transform 旋转，需通过 hover 或 class 切换等状态变化来触发动画；rotate() 必须带单位；卡顿需加 translatez(0) 启用 gpu 加速；无限旋转应使用 @keyframes + animation。
transition 不能直接触发 transform 旋转？
因为 transition 只监听属性变化，不主动“启动”动画。你写了 transform: rotate(360deg)，但没告诉浏览器“什么时候变”——必须靠状态切换（比如 hover、class 切换）来触发动画。
- 常见错误：只写
transition: transform 0.3s，但没配任何状态变化，结果盒子纹丝不动 - 正确做法：用
:hover或 JS 切换 class，让transform值从初始值（如rotate(0)）变到目标值（如rotate(360deg)） - 注意单位：
rotate()后面必须带单位（deg、rad或turn），写成rotate(360)会失效
rotate 动画卡顿或跳帧？
本质是浏览器渲染优化问题。默认情况下，transform 不一定走 GPU 加速，尤其在低端设备或复杂页面中容易掉帧。
- 加
will-change: transform提前告知浏览器该元素将变化（但别滥用，可能引发内存开销） - 更稳妥的做法是强制启用硬件加速：
transform: rotate(0deg) translateZ(0)，哪怕translateZ(0)看似无意义，它能触发 GPU 图层提升 - 避免在动画中同时修改
width、height或background-color等会触发重排/重绘的属性
想让盒子无限旋转停不下来？
用 transition 实现不了真正“无限”，它只负责两个状态间的过渡；要持续转，得换 @keyframes + animation。
-
animation: spin 2s linear infinite是标准写法，其中spin是自定义关键帧名 - 关键帧里必须显式写起止状态：
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } - 如果只写
to { transform: rotate(360deg); }，部分老浏览器（如旧版 Safari）可能不识别，建议始终补全from和to - 注意：
animation会覆盖同元素上的transition，两者别混用在同一属性上
IE11 或 iOS Safari 12 以下转不动？
不是写法错，是浏览器对 transform 的支持有断层。IE11 需要 -ms-transform 前缀，iOS Safari 12 以下对 transform: rotateZ() 支持不稳定，一律用 rotate()。
- 兼容写法示例：
transform: -ms-transform rotate(45deg);<br>transform: rotate(45deg);
- 别用
rotateX()/rotateY()，它们在 IE 和旧 iOS 上基本不可用 - 如果项目必须支持 IE11，还要加
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1)（仅限 90° 倍数旋转，且性能差，慎用）
translateZ(0)，看着代码全对，就是转得慢或闪一下。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
