将图像叠加到正在移动的元素上

Question

我正在构建一个太阳系查看器应用程序。目前我有 8 个使用以下方法围绕中心点运行的物体。

.orbitContainer {
  
  width:var(--s);
  height:var(--s);
  margin:auto;
  text-align: center;
  border-radius: 50%;
  animation: spin var(--d) linear infinite, translateBackground 100s infinite linear; 
  transform:rotate(0) translate(var(--o)) rotate(0);
} 
@keyframes spin {
  100% {
    transform:rotate(1turn) translate(var(--o)) rotate(-1turn);
  }
}
.mercuryPath {
  --d:20s; 
  --o:4.5rem;
  --s: 12rem;
  z-index: 9;
}

这工作正常，但第 6 个天体是土星，它有环。我正在尝试将我拥有的环图像覆盖到代表土星的元素上
这是我目前的尝试

<div className="orbitContainer saturnPath" >
<MiniPlanet name="saturn" className="orbitContainer saturnMini " />
<img src="./components/planetTextures/rongs.png" alt="rings"></img></div>

我认为我将图像放在与行星相同的路径容器中，它至少会在相似的位置旋转。然而，它似乎是随机移动的。
我想知道如何覆盖地球上的环，或者另一种方法来实现这一点。每个行星都有大气效应，所以不幸的是我不能只使用土星的静态图像和环。
这是一个带有我的代码me的代码框的链接

提前感谢您的帮助。

Answer 1

主要问题是环与行星不在同一条路径上，它们在同一个外部 div 内。此外，戒指 img 似乎没有被赋予“戒指”类。

我无法访问环图像，因此无法尝试将其准确定位在土星上，但是将 img 向上移动到轨道元素并添加类意味着我可以看到“环”这个词在顶部旋转土星好。

试试这个：

<div class="orbitContainer saturnPath">
  <div class="miniPlanet">
    <a href="/saturn">
      <div class="orbitContainer saturnMini ">
        <img src="./components/planetTextures/rongs.png" alt="rings" class="rings">
      </div>
    </a>
  </div>
</div>

旁注：将外部 div 'saturnPath' 和内部 div 'saturnMini' 都与类 orbitContainer 一起使用有点令人困惑。这是否给出了所需的轨道？