CSS太阳系模型实现行星公转时避免元素自身旋转的问题咨询

当前实现的公转逻辑是对整个.orbitContainer施加360度旋转动画，由于CSS的transform变换会沿DOM层级继承，容器内的行星元素会同步继承容器的旋转变换：容器绕太阳转满360度的过程中，行星自身也会获得同样角度的旋转，最终出现朝向持续偏转、南北极对准太阳的问题。

所有原有轨道参数、公转速度、动画缓动逻辑完全保留，不修改任何已有的公转动画配置，仅通过给行星元素添加同周期反向旋转动画的方式，抵消从父容器继承的旋转变换，实现公转过程中行星朝向固定的效果。

代码修改步骤 #

• 新增和公转动画参数完全对齐的反向旋转关键帧
• 给承载行星的.inner类追加反向旋转动画

具体代码 #

1. 在原有关键帧规则旁追加反向旋转定义：

@keyframes counterCircleRound {
  100% {
    transform: rotate(-360deg);
  }
}

2. 在.orbitContainer .inner的原有样式基础上，追加动画属性：

.orbitContainer .inner {
  /* 保留原有全部样式 */
  position: relative;
  width: calc(calc(2 * var(--size)) * var(--sizeunit));
  height: calc(calc(2 * var(--size)) * var(--sizeunit)); 
  border-radius: 50%;
  border-style: none;
  /* 新增反向旋转动画，参数和父容器公转动画完全一致 */
  animation: counterCircleRound calc(var(--time) * var(--timeunit)) linear infinite;
}

• 反向旋转动画的时长、缓动模式、循环规则必须和父容器的公转动画完全匹配，否则两个旋转的角速度存在差值，无法完全抵消继承的旋转变换，行星会随时间逐渐偏转朝向。
• 由于子元素的transform旋转参考点是自身几何中心，不会改变它在父容器内的相对位置，因此完全不会破坏原有公转的轨道、速度、半径参数。
• 如果后续需要给行星添加独立的自转动效，只需要在反向旋转的角度计算中叠加对应的自转角度偏移即可，无需改动外层的公转动画逻辑。

内容的提问来源于stack exchange，提问作者Dylan Bozarth