如何使用 3D CSS 创建简单的轨道动画

Question

我正在尝试创建一个简单的月球绕行星运行的加载动画。 我正在使用 3d css 来模拟椭圆轨道，但我无法让动画看起来像我想要的那样，如下所述。我觉得我一路上可能把事情搞得太复杂了。

这就是我到目前为止所要做的：

.outer {
  width: vw;
  height: vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner {
  width: 100px;
  height: 100px;
  transform: rotate(-25deg);
  display: flex;
  justify-content: center;
  align-items: center;
}

.planet-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: perspective(150px) rotateY(75deg);
  transform-style: preserve-3d;
}

.planet-outer {
  animation: planet 2s infinite;
  transform-origin: 50% -25%;
  transform-style: preserve-3d;
  width: 100%;
  height: 100%;
}

.planet {
  width: 15%;
  height: 15%;
  background-color: black;
  border-radius: 999px;
  margin: 75% auto 0 auto;
  transform: perspective(150px) rotateY(-75deg);
}

.back-circle {
  background-color: blue;
  border-radius: 999px;
  position: absolute;
  width: 40%;
  height: 40%;
  top: 50%;
  left: 50%;
  transform: perspective(150px) translate3d(-50%, -50%, 0px);
}

@keyframes planet {
  0% {
    transform: perspective(150px) rotate(0);
  }
  100% {
    transform: perspective(150px) rotate(360deg);
  }
}

<div class="outer">
  <div class="loading-icon">
    <div class="inner">
      <div class="back-circle"></div>
      <div class="planet-container">
        <div class="planet-outer">
          <div class="planet"></div>
        </div>
      </div>
    </div>
  </div>
</div>

下面是我想要的动画的快速图表：

如您所见，椭圆轨道和视角运行良好。然而，“月亮”在自转时会发生扭曲和翻转，并且在返回轨道上不会被“行星”遮挡。我理解为什么这些方面无法正常工作，但尽管玩了一段时间，我无法对这些问题提出可靠的解决方案。

如有任何帮助，我们将不胜感激，谢谢！

Answer 1

你可以尝试给地球一个 z-index: 1 ，给月球 z-index : 2 ；在动画过程中，当月球到达地球边缘时，将 z 索引设置为 0。这将导致月球在到达轨道终点时出现在照片前面，而在返回起点时消失在地球后面.

另一个简单的技巧是使用不透明度。

HTML：

 <div class="earth"></div>
 <div class="moon"></div>

CSS：

    body {
  background-color: #0b132b;
}

.earth {
  width: 150px;
  height: 150px;
  background-color: #1a1a1a;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  animation: fadeIn 1.7s backwards;
}

.moon {
  width: 50px;
  height: 50px;
  background-color: #333333;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center center;
  z-index: 2;
  animation: orbit 4s linear infinite;
}

@keyframes orbit {
  from {
    transform: rotate(150deg)  translateX(70px) rotate(-140deg);
    z-index: -1;
   
   
  }
  to {
    transform: rotate(504deg) translateX(70px) rotate(-500deg);
    
  }
}

}

Answer 2

聚会迟到了，但这是我的 2 美分：
我会使用一些 CSS 3D 来达到这个目的

• 创建一个使用 CSS 的包装

  .system

  DIV 父级

  perspective

• 在.system内放置一个

  .planet

  （地球是行星）
• 在.system内部还添加一个

  .orbit

  ，其边缘有一个

  .moon

  子元素
• 沿 X 轴旋转

  .orbit

  （例如 80 度）
• 由于

  .moon

  是

  .orbit

  的子级，因此将其在同一轴上反向旋转 90deg
• 现在添加轨道的无限线性动画（360°）
• 为了防止它绕地球旋转时变成

  .moon

  煎饼 — 将月球反向旋转 -360 度
• 最后将整个

  .system

  旋转45deg

示例：

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  overflow: hidden;
  min-height: 100dvh;
}

.system {
  perspective: 1000px;
  transform-style: preserve-3d;
  height: 180px;
  aspect-ratio: 1;
  rotate: 45deg;
  margin: auto;
}

.planet,
.orbit,
.moon {
  position: absolute;
  transform-style: preserve-3d;
  inset: 0;
  height: calc(var(--size) * 1%);
  margin: auto;
  aspect-ratio: 1;
  border-radius: 50%;
}

.planet {
  --size: 50;
  background: #0bf;
}

.orbit {
  --size: 80;
  --duration: 6s;
  box-shadow: 0 0 0 2cqmin #5554, inset 0 0 0 2cqmin #5554;
  animation: orbit calc(var(--duration)) linear infinite;
  rotate: 1 0 0 80deg;
}

.moon {
  --size: 24;
  height: calc(var(--size) * 1%);
  margin-left: calc(var(--size) * -0.5%);
  background: #000;
  animation: moon calc(var(--duration)) linear infinite;
  rotate: 1 0 0 90deg;
}

@keyframes orbit { to { transform: rotate3d(0, 0, 1,  360deg); } }
@keyframes moon  { to { transform: rotate3d(0, 1, 0, -360deg); } }

<div class="system">
  <div class="planet"></div>
  <div class="orbit">
    <div class="moon"></div>
  </div>
</div>