如何实现带3D环绕小行星与动态台风效果的交互式行星环境？

问题说明 #

已为行星设置linear-gradient样式，需求如下：

• 实现小行星3D环绕行星运行（优先解决）
• 行星表面添加类似台风的动态天气效果
• 最终实现交互式环境：用户可通过鼠标轻微推动环绕的小行星（需JavaScript，暂不优先）

原尝试代码如下：

原代码 #

CSS

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

body {
  background: black;
}

.planet,
.planet2 {
  position: absolute;
  margin: 5px;
  top: 50%;
  left: 50%;
  transform: translate(-60%, 0);
  height: 1100px;
  width: 900px;
  border-radius: 50%;
  z-index: 2;
  background: linear-gradient(40deg, #4a190290 20%, #7b222235, #2b2a29df);
  box-shadow: -20px -20px 40px 40px #801a1a6f inset, 0 0 20px 40px #cb221f90;
}

.astroid__belt {
  width: 100%;
  height: 100%;
  top: 10%;
  left: calc(50% - 50%);
  transform-style: preserve-3d;
  transform: perspective(1000px);
  text-align: center;
  overflow: hidden;
  position: relative;
}

.planet2 {
  position: absolute;
  background: linear-gradient(45deg, transparent 50%, #ac4444, #b90f0fde, #542408b0);
  z-index: 3;
}

.astroid1 {
  position: relative;
  top: 10%;
  width: 200px;
  height: 400px;
  left: calc(50% - 200px);
  background-color: #090606;
  border-right: 3px solid transparent;
  border-radius: 50%;
  z-index: 2;
  animation: animateAstroid 7s linear infinite;
  transform: tranzlateZ(550px);
}

.astroid__belt .astroid {
  position: absolute;
  inset: 0 0 0 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.astroid,
div {
  position: absolute;
  transform-style: preserve-3d;
  border-radius: 70%;
}

@keyframes animateAstroid1 {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(0deg) rotateY(75deg) rotateZ(360deg);
  }
}

@keyframes animateAstroid2 {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(0deg) rotateY(20deg) rotateZ(360deg);
  }
}

HTML

<div class="astroid__belt">
  <div class="astroid1"></div>
  <div class="astroid2"></div>
  <div class="astroid3"></div>
  <div class="astroid4"></div>
  <div class="astroid5"></div>
  <div class="astroid6"></div>
  <div class="astroid7"></div>
  <div class="astroid8"></div>
  <div class="astroid9"></div>
  <div class="astroid10"></div>
  <div class="astroid12"></div>
</div>
<div class="planet"></div>

3D环绕修正方案 #

原代码存在拼写错误、小行星未绑定轨道动画等问题，以下是调整后的代码，实现真正的3D环绕效果：

修正后的CSS

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

body {
  background: #000;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1500px;
}

/* 行星容器，作为3D轨道的中心 */
.planet-container {
  position: relative;
  width: 900px;
  height: 1100px;
  transform-style: preserve-3d;
}

.planet {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: 2;
  background: linear-gradient(40deg, #4a190290 20%, #7b222235, #2b2a29df);
  box-shadow: -20px -20px 40px 40px #801a1a6f inset, 0 0 20px 40px #cb221f90;
}

/* 小行星带容器，承载所有轨道小行星 */
.astroid__belt {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  /* 让整个小行星带缓慢旋转，模拟3D视角变化 */
  animation: rotateBelt 30s linear infinite;
}

/* 通用小行星样式 */
.astroid {
  position: absolute;
  border-radius: 50%;
  background: #555;
  box-shadow: inset -5px -5px 10px #333, inset 5px 5px 10px #777;
  transform-style: preserve-3d;
}

/* 为不同小行星设置不同轨道半径、大小和动画延迟 */
.astroid1 {
  width: 40px;
  height: 40px;
  top: 50%;
  left: 50%;
  margin: -20px;
  /* 轨道半径 */
  transform: translateZ(600px);
  animation: orbit 8s linear infinite;
}

.astroid2 {
  width: 30px;
  height: 30px;
  top: 50%;
  left: 50%;
  margin: -15px;
  transform: translateZ(650px) rotateY(45deg);
  animation: orbit 10s linear infinite 1s;
}

.astroid3 {
  width: 35px;
  height: 35px;
  top: 50%;
  left: 50%;
  margin: -17.5px;
  transform: translateZ(700px) rotateY(90deg);
  animation: orbit 12s linear infinite 2s;
}

.astroid4 {
  width: 25px;
  height: 25px;
  top: 50%;
  left: 50%;
  margin: -12.5px;
  transform: translateZ(620px) rotateY(135deg);
  animation: orbit 9s linear infinite 0.5s;
}

/* 小行星环绕动画 */
@keyframes orbit {
  0% {
    transform: translateZ(var(--orbit-radius)) rotateY(0deg);
  }
  100% {
    transform: translateZ(var(--orbit-radius)) rotateY(360deg);
  }
}

/* 小行星带整体旋转，增强3D感 */
@keyframes rotateBelt {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

/* 行星台风动态效果 */
@keyframes typhoon {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 100%;
  }
}

修正后的HTML

<div class="planet-container">
  <div class="planet"></div>
  <div class="astroid__belt">
    <div class="astroid astroid1" style="--orbit-radius: 600px;"></div>
    <div class="astroid astroid2" style="--orbit-radius: 650px;"></div>
    <div class="astroid astroid3" style="--orbit-radius: 700px;"></div>
    <div class="astroid astroid4" style="--orbit-radius: 620px;"></div>
    <!-- 可继续添加更多小行星 -->
  </div>
</div>

额外说明 #

1. 3D环绕原理：通过transform-style: preserve-3d开启3D空间，利用translateZ设置轨道半径，结合rotateY动画实现环绕效果；小行星带整体旋转增强视觉立体感。
2. 台风动态效果：可给.planet添加多层动态渐变背景，配合typhoon动画实现旋转流动效果，示例如下：

.planet {
  background: 
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.1) 0%, transparent 50%),
    linear-gradient(40deg, #4a190290 20%, #7b222235, #2b2a29df);
  animation: typhoon 20s linear infinite;
}

3. 鼠标交互：后续可通过JavaScript监听mousemove事件，调整小行星的动画速度或轨道偏移量，实现推动效果。

内容的提问来源于stack exchange，提问作者Jay Stewart