摩天轮效果需父容器旋转而子元素反向旋转抵消：父设transform-origin: center并动画rotate(0deg→360deg)，子用rotate(0deg→-360deg)，时长与循环方式须完全一致，配合will-change: transform优化性能。
摩天轮旋转必须用 transform: rotate()，但子元素会跟着歪
直接对父容器加 rotate()，里面所有子元素都会同步旋转——这不是摩天轮效果，是整个页面在转。真正要的是“轮子转，吊舱不转”。核心思路是：父容器旋转，子元素反向旋转抵消。
子元素必须用 transform: rotate(-Xdeg) 抵消父级旋转
如果父容器每秒转 360°（即 rotate(360deg)），子元素就得每秒反向转 -360° 才能视觉上静止。但注意：CSS 动画中不能写 rotate(calc(-1 * var(--deg))) 这种动态计算，得靠关键帧手动配平。
- 父容器动画设为
@keyframes wheel { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } - 子元素动画设为
@keyframes cabin { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } - 两个动画时长、循环方式（
infinite linear）必须完全一致，否则会出现“抖动”或“缓慢偏斜”
用 transform-origin 控制旋转中心点，别默认左上角
摩天轮绕中心转，不是绕左上角。父容器必须显式设置 transform-origin: center;（等价于 50% 50%），否则旋转轴偏移，吊舱轨迹会变成椭圆或甩出去。
- 如果父容器没设宽高，
center会按内容盒计算，可能不准；建议给父容器明确的width和height - 子元素不需要设
transform-origin，除非你额外想让它绕自身某点微调 - 别用
left: 50%; top: 50%; transform: translate(-50%, -50%)模拟居中——这和transform-origin冲突，且增加布局干扰
性能关键：用 will-change: transform 避免卡顿
持续旋转属于高频率重绘，Chrome/Firefox 对未标记的 transform 动画容易掉帧。尤其当子元素含图片或文字时，不加优化可能从 60fps 掉到 30fps。
- 只在父容器上加
will-change: transform;，子元素不用加（它只是反向转，开销小） - 移动端务必测试：iOS Safari 对
will-change处理较敏感，有时反而更卡，可先去掉观察 - 避免同时对同一元素叠加
rotate()和scale()或skew()——复合变换会显著升高 GPU 负载
摩天轮式旋转真正难的不是转起来，而是让吊舱稳住不动。反向旋转必须帧帧对齐，transform-origin 必须精准落在几何中心，稍有偏差，几秒后就会明显漂移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
