必须设transform-origin: center center使元素绕视觉中心旋转，否则rotate(360deg)会偏移；inline元素需先设display:block/inline-block；@keyframes须用from/to写0deg到360deg；动画需加linear和infinite；fixed/absolute定位时要配合translate(-50%,-50%)居中。
transform-origin 必须设为 center center
元素默认绕左上角（0 0）旋转，不是视觉中心。不改这个，哪怕写了 rotate(360deg)，也会看到明显偏移或“绕圈跑”。
必须显式声明：transform-origin: center center; 或等价写法 transform-origin: 50% 50%;。
注意：如果元素是 inline 元素（如 span），得先加 display: inline-block; 或 display: block;，否则 transform-origin 对 width/height 无感知，50% 计算会失效。
@keyframes 定义要从 0deg 到 360deg
别用 from { transform: rotate(1deg); } 这类起始偏移写法——动画首帧就错位，循环时可能卡顿或跳变。
标准写法只用两个关键点：
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }- 避免混用
rotateZ()和rotate()；现代浏览器中rotate()默认就是绕 Z 轴，语义更清晰 - 不用百分比写法（如
0% { ... } 100% { ... }），除非你要加中间帧；纯 360° 自转，from/to更简洁、不易手误
animation 属性别漏掉 linear 和 infinite
缺 linear 会导致默认 ease 缓动——开头慢、结尾快，看起来像“加速甩出去”，不是匀速转；
缺 infinite 动画只执行一次就停，达不到持续旋转效果。
推荐完整写法：animation: spin 2s linear infinite;
其中时长（如 2s）可调，但别设太短（10s）——用户感知不到“动”。
fixed 或 absolute 定位元素要额外处理位移
如果你把旋转元素设成 position: fixed; 或 position: absolute;，它脱离文档流后，transform-origin: center 仍按自身盒模型算，但视觉上容易“飘”——尤其鼠标跟随类场景。
解决方法是叠加 transform: translate(-50%, -50%) 把元素左上角锚点拉回中心点：
- 先加
left: 50%; top: 50%（让左上角落在视口中心） - 再加
transform: translate(-50%, -50%)把自己真正居中 - 最后加
transform-origin: center center和动画
立即学习“前端免费学习笔记（深入）”；
