JavaScript实现元素旋转动画有四种核心方式：一是setInterval逐帧更新rotate值，适合精细控制；二是requestAnimationFrame递归调用，性能更高、更流畅；三是CSS transition声明式触发，最轻量推荐；四是@keyframes配合JS控制播放状态，适合复杂序列。
用 JavaScript 实现元素旋转动画，核心是动态修改元素的 transform: rotate() 值，配合定时器或 CSS 动画 API 控制变化节奏。关键不在“能不能转”，而在“转得顺、控得准、不卡顿”。
用 setInterval 逐帧更新 rotate 值
适合需要精细控制旋转角度、方向或中途暂停/加速的场景。原理是每间隔若干毫秒，读取当前角度，加一个增量，再写回 style。
- 先获取目标元素：
const box = document.getElementById('myBox'); - 定义起始角度、步长（如每次+2°）、刷新间隔（如30ms）
- 用
setInterval持续更新：box.style.transform = `rotate(${angle}deg)`; - 记得在达到目标角度后用
clearInterval停止，避免内存泄漏
用 requestAnimationFrame 实现高性能旋转
比 setInterval 更流畅，浏览器会自动优化调用时机，匹配屏幕刷新率（通常60fps），适合长时间运行或对性能敏感的动画。
- 封装一个递归函数，内部调用
requestAnimationFrame - 每次执行时计算新角度（可基于时间戳做匀速或缓动）
- 例如：让元素在2秒内顺时针转360°，可用
(Date.now() - start) / 2000 * 360得到实时角度 - 注意用
element.style.transform = 'rotate('+ angle +'deg)'更新，不要漏单位
结合 CSS transition 实现声明式旋转
最轻量、最推荐的基础方案：JavaScript 只负责“触发”，把动画逻辑交给 CSS 处理，减少 JS 计算压力。
立即学习“Java免费学习笔记（深入）”；
- 先在 CSS 中定义过渡：
.rotating { transition: transform 0.5s ease-in-out; } - JS 只需切换类名或直接设置 style：
el.classList.add('rotating'); el.style.transform = 'rotate(180deg)'; - 想反转？再设一次
rotate(0deg)即可，浏览器自动补间 - 支持 transform-origin 调整旋转中心点，比如
transform-origin: top left;
用 CSS @keyframes + JavaScript 控制播放状态
适合复杂旋转序列（如来回摆动、多段变速），或需与其它动画协同的场景。
- CSS 定义动画：
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } } - JS 控制：
el.style.animation = 'spin 2s linear infinite'; - 暂停/恢复：改
animationPlayState属性为'paused'或'running' - 动态改持续时间或方向：直接重写
el.style.animationDuration或el.style.animationDirection
不复杂但容易忽略：确保目标元素有明确的宽高和 display，避免 transform 失效；rotate 值始终带单位（deg / rad / turn）；移动端注意开启硬件加速（transform: rotate(...) translateZ(0) 可选）。
