摩天轮式旋转动画需两层配合：外层@keyframes控制整体匀速旋转，子项用nth-child配合rotate()和translate()实现均匀分布与正立效果，关键在transform顺序及反向旋转抵消歪斜。
用
实现摩天轮式旋转动画
摩天轮动画本质是「中心固定、子项沿圆周匀速分布并同步旋转」，不是单纯转圈。直接对容器加
只会让所有元素一起乱转，看不出摩天轮结构。
关键在两层动画配合：
控制整体旋转，再用
和
给每个子项单独定位。常见错误是只写一层旋转，结果变成风车或陀螺。
必须用
确保绕中心转
子项数量决定每份角度，比如 8 个吊舱就用
每个子项的
要先
定向，再
推到圆周上，顺序不能反
CSS 中用
分配不同初始角度
不用 JS 就能做出“吊舱均匀分布”的效果，靠的是
配合变量计算。现代浏览器支持
，但老版本（如 Safari 15.2 之前）不支持在
里直接写
，得手动展开。
示例：8 个吊舱，第 1 个转 0°，第 2 个转 45°，依此类推。写法要像这样：
立即学习
“
前端免费学习笔记（深入）
”；
注意最后那个反向
：它抵消父级旋转带来的文字/图标歪斜，让吊舱内容始终正立。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
动画卡顿？检查
和硬件加速
摩天轮动画频繁触发重绘，尤其在低端设备或嵌入 iframe 时容易掉帧。纯
和
是安全的，但一旦混进
、
或
，浏览器就得走软件渲染。
确保所有动画属性只用
和
给旋转容器加
，但别滥用——只加在真正动的元素上
如果吊舱里有图片，加上
强制 GPU 加速（兼容性比
更稳）
避免在
里写太多小数位角度，
没意义还拖慢解析
IE 不支持？用
降级处理
IE10+ 支持
，但不支持
的多值写法（比如
）。如果必须兼容 IE，得拆成两个元素：外层转，内层用
+
/
模拟圆周位置。
更实际的做法是：用
保证匀速，然后接受 IE 下吊舱不正立——因为反向
在 IE 里解析异常。这时候不如直接给 IE 用户一个静态 SVG 摩天轮图，反而更稳。
真正难搞的不是写法，是吊舱和支撑臂的视觉层次关系：支撑臂要永远在吊舱后面，但又不能靠
（会破坏 transform 层叠上下文），得靠 DOM 顺序控制——支撑臂元素写在吊舱前面，且不参与旋转动画。
@keyframesrotate()@keyframestransform: rotate()translate()transform-origin: center360deg / 8 = 45degtransformrotate()translate()nth-childnth-childcalc()transformcalc(45deg * n)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-changetransformopacitylefttopbackground-colortransformopacitywill-change: transformtransform: translateZ(0)will-change@keyframes0.001deganimation-timing-function@keyframestransformrotate(45deg) translateX(100px)position: absolutetopleftanimation-timing-function: linearrotatez-index