用 transform: rotate() 可直接旋转元素，单位须为 deg、rad 或 turn；@keyframes 定义动画序列但需 animation 属性触发，注意 transform 覆盖与兼容性问题。
用 transform: rotate() 实现即时旋转
直接旋转元素不需要动画，只需在 CSS 中设置 transform: rotate(45deg) 即可。注意单位必须是 deg、rad 或 turn，写成 rotate(45) 会失效。该变换基于元素自身的中心点（transform-origin: 50% 50% 默认），如需绕左上角转，得提前改 transform-origin: 0 0。
用 @keyframes 定义旋转动画序列
@keyframes 本身不触发动画，只是声明“从哪到哪怎么转”。常见写法是：
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
也可以用百分比控制中间状态，比如让前半程加速、后半程减速：
-
0%：起始角度，必须明确写transform: rotate(...) -
50%：可加transform-origin动态切换旋转中心（但多数场景没必要） -
100%：终点角度，和to等价，但更易读
把 @keyframes 绑定到元素上要配 animation 属性
仅定义 @keyframes 不会动，必须用 animation 触发。最简写法：animation: spin 2s linear infinite。其中：
立即学习“前端免费学习笔记（深入）”；
-
spin是@keyframes名，大小写敏感 -
2s是单次时长，支持ms；设太短（如100ms）可能因重绘来不及而卡顿 -
linear表示匀速，换成ease-in-out更自然 -
infinite控制循环，去掉就只转一次；加forwards可保留最后一帧样式
注意：如果元素已有 transform（比如平移），直接写 rotate() 会覆盖——要用 transform: translateX(10px) rotate(45deg) 合并写。
旋转动画的兼容性与性能陷阱
现代浏览器都支持 transform 和 @keyframes，但老版 Safari（-webkit- 前缀。真正容易出问题的是性能：
- 在低功耗设备上，持续
infinite旋转可能增加 GPU 负载，尤其同时多个元素在转 - 不要对
position: static的块级元素用rotate()做布局——它不占文档流，父容器不会重排，容易导致点击区域错位 - 动画中频繁读取
offsetLeft或getBoundingClientRect()会强制同步重排，应避免
旋转看起来简单，但组合变换、动态 origin、JS 控制暂停/反向这些操作，一不留神就会让角度计算和视觉表现脱节。
