CSS问题：已沿Y轴倾斜的轨道无法同时实现Z轴旋转

核心问题在于你在动画中直接覆盖了.orbit的transform属性，导致初始的rotateY(-15deg)被动画的rotateZ替换了。要同时保留倾斜效果和旋转动画，最可靠的方式是把静态倾斜和动态旋转拆分到两个嵌套元素中：

修改后的代码 #

HTML部分 #

<body>
  <div class="galaxy">
    <div class="planet"></div>
    <!-- 新增容器负责轨道的倾斜 -->
    <div class="orbit-container">
      <div class="orbit">
        <div class="object"></div> 
      </div>
    </div>      
  </div>
</body>

CSS部分 #

body {
  height: 1000px;
  background-color: #01143D;
}

.galaxy {  
  position: relative;
  width: 100%;
  height: 100%;
  transform: rotateX(75deg); 
  transform-style: preserve-3d;
}

.planet {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-left: -200px;
  margin-top: -200px;
  border-radius: 50%;
  background-color: #FB7209;
  transform: rotateX(-75deg);
}

/* 新容器：负责固定的Y轴倾斜 */
.orbit-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 800px;
  height: 800px;
  margin-top: -400px;
  margin-left: -400px;
  transform: rotateY(-15deg);
  transform-style: preserve-3d;
}

.orbit {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 4px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  /* 移除原有的rotateY，交给父容器处理 */
  animation-name: orbit;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 3s;
}

@keyframes orbit {
  0%   { transform: rotateZ(0deg); }
  100% { transform: rotateZ(-360deg); }
}

.orbit .object {
  position: absolute;
  /* 修改位置到轨道顶部边缘，确保绕行星旋转 */
  top: 0;
  left: 50%;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -50px;
  border-radius: 50%;
  background-color: red;
  /* 可选：保持小天体自身不旋转 */
  animation: inherit;
  animation-name: none;
}

关键说明 #

• 拆分变换层级：用.orbit-container承担静态的rotateY(-15deg)倾斜，.orbit只负责动态的rotateZ旋转，避免两个变换互相覆盖。
• 修正天体位置：原来的top:50%会让小天体在轨道中心，修改为top:0才能让它沿轨道边缘运动。
• 保留3D空间：在.orbit-container上设置transform-style: preserve-3d，确保3D变换的层级关系正确。

内容的提问来源于stack exchange，提问作者Krzysztof Hejna