摩天轮式旋转动画需两层配合：外层@keyframes控制整体匀速旋转，子项用nth-child配合rotate()和translate()实现均匀分布与正立效果，关键在transform顺序及反向旋转抵消歪斜。
用 @keyframes 实现摩天轮式旋转动画
摩天轮动画本质是「中心固定、子项沿圆周匀速分布并同步旋转」，不是单纯转圈。直接对容器加 rotate() 只会让所有元素一起乱转，看不出摩天轮结构。
关键在两层动画配合：@keyframes 控制整体旋转，再用 transform: rotate() 和 translate() 给每个子项单独定位。常见错误是只写一层旋转，结果变成风车或陀螺。
- 必须用
transform-origin: center确保绕中心转 - 子项数量决定每份角度，比如 8 个吊舱就用
360deg / 8 = 45deg - 每个子项的
transform要先rotate()定向，再translate()推到圆周上，顺序不能反
CSS 中用 nth-child 分配不同初始角度
不用 JS 就能做出“吊舱均匀分布”的效果，靠的是 nth-child 配合变量计算。现代浏览器支持 calc()，但老版本（如 Safari 15.2 之前）不支持在 transform 里直接写 calc(45deg * n)，得手动展开。
示例：8 个吊舱，第 1 个转 0°，第 2 个转 45°，依此类推。写法要像这样：
立即学习“前端免费学习笔记（深入）”；
div:nth-child(1) { transform: rotate(0deg) translate(80px) rotate(0deg); }
div:nth-child(2) { transform: rotate(45deg) translate(80px) rotate(-45deg); }
div:nth-child(3) { transform: rotate(90deg) translate(80px) rotate(-90deg); }注意最后那个反向 rotate()：它抵消父级旋转带来的文字/图标歪斜，让吊舱内容始终正立。
动画卡顿？检查 will-change 和硬件加速
摩天轮动画频繁触发重绘，尤其在低端设备或嵌入 iframe 时容易掉帧。纯 transform 和 opacity 是安全的，但一旦混进 left、top 或 background-color，浏览器就得走软件渲染。
- 确保所有动画属性只用
transform和opacity - 给旋转容器加
will-change: transform，但别滥用——只加在真正动的元素上 - 如果吊舱里有图片，加上
transform: translateZ(0)强制 GPU 加速（兼容性比will-change更稳） - 避免在
@keyframes里写太多小数位角度，0.001deg没意义还拖慢解析
IE 不支持？用 animation-timing-function 降级处理
IE10+ 支持 @keyframes，但不支持 transform 的多值写法（比如 rotate(45deg) translateX(100px)）。如果必须兼容 IE，得拆成两个元素：外层转，内层用 position: absolute + top/left 模拟圆周位置。
更实际的做法是：用 animation-timing-function: linear 保证匀速，然后接受 IE 下吊舱不正立——因为反向 rotate 在 IE 里解析异常。这时候不如直接给 IE 用户一个静态 SVG 摩天轮图，反而更稳。
真正难搞的不是写法，是吊舱和支撑臂的视觉层次关系：支撑臂要永远在吊舱后面，但又不能靠 z-index（会破坏 transform 层叠上下文），得靠 DOM 顺序控制——支撑臂元素写在吊舱前面，且不参与旋转动画。
