滚动驱动旋转必须用 scroll 事件监听+requestAnimationFrame 动态计算 rotate 角度，而非 @keyframes 动画，因后者是时间驱动、无法响应滚动位置变化；需配合 transform-origin 显式设置、will-change 优化及映射函数归一化处理。
滚动驱动旋转不是靠 CSS 动画自动跑，而是要把滚动位置映射成旋转角度——直接用 scroll 事件监听 + transform: rotate() 动态设值，否则会卡顿、错位或不触发。
为什么 @keyframes + animation 不适合滚动驱动旋转
这类 CSS 动画是时间驱动（time-based），而滚动驱动是位置驱动（position-based）：浏览器滚动时，你得实时读取 scrollTop 或 getBoundingClientRect().top，再算出对应角度。用 animation 只能预设一段固定时长的旋转，无法响应滚动快慢、方向或暂停。
常见错误现象：
- 元素“转半圈就停”，因为
animation-iteration-count: 1默认只执行一次 - 滚动过快时动画跳帧，
linear无法匹配实际滚动节奏 - 滚动到页面底部时旋转角度突变，因没做归一化处理
用 requestAnimationFrame + getBoundingClientRect 算角度
比 scroll 事件更稳：避免高频触发导致重排重绘，且能精确拿到元素相对于视口的位置。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 监听
scroll时只标记“需要更新”，真正在requestAnimationFrame回调里读取el.getBoundingClientRect().top - 把
top值映射到 0–360°：例如元素进入视口顶部时rotate(0deg)，完全居中时rotate(180deg)，底部时rotate(360deg) - 用
Math.min/Math.max限幅，防止滚动超出范围后角度乱跳 - 示例核心逻辑：
let el = document.querySelector('.rotating-item');<br>function updateRotation() {<br> const rect = el.getBoundingClientRect();<br> const viewportHeight = window.innerHeight;<br> const progress = (viewportHeight - rect.top) / (viewportHeight + el.offsetHeight);<br> const angle = Math.min(360, Math.max(0, progress * 360));<br> el.style.transform = `rotate(${angle}deg)`;<br>}<br>window.addEventListener('scroll', () => requestAnimationFrame(updateRotation));
transform-origin 必须显式设置，否则旋转中心飘移
滚动过程中元素位置变化，若依赖默认 transform-origin: 50% 50%，视觉上会像“绕着一个浮动点转”，尤其在 position: sticky 或 flex 容器里更明显。
正确做法：
- 统一设为固定坐标，如
transform-origin: center center（等价于50% 50%）或像素值transform-origin: 0 0 - 若想绕左上角旋转（比如菜单图标展开），必须写死
transform-origin: 0 0，不能靠父容器推导 - 注意：
transform-origin要写在初始样式里，不能只在 JS 里动态改——否则首次渲染无效果
移动端兼容性与性能关键点
iOS Safari 和部分安卓 WebView 对 transform 的硬件加速支持不稳定，纯靠 JS 更新 style.transform 容易掉帧。
必须加的优化项：
- 给旋转元素加
style="will-change: transform;"，提前提示浏览器该属性将频繁变更 - 始终用
transform: rotateZ(...)替代rotate(...)，明确走 2D 合成层（部分旧引擎对简写识别不准） - 避免同时操作
top/left和transform，会强制触发 layout，直接用transform: translate() rotate()组合位移+旋转 - 在
requestAnimationFrame回调开头加if (!el.offsetParent) return;，防止元素被display: none后仍尝试计算
真正难的不是怎么让元素转起来，而是怎么让它在各种滚动速度、设备缩放、DOM 插入/销毁场景下，角度始终线性、平滑、不跳变——这取决于你映射函数的设计和节流时机，而不是某一行 rotate() 的写法。
