在 HTML/CSS 中让行星遵循其轨道

Question

所以我第一次从事 React 项目（到目前为止只使用 HTML 和 CSS）。我正在尝试创建一个行星围绕太阳演化的太阳系。对于下面的代码片段，到目前为止我只包含了第一颗行星及其轨道。太阳应该位于屏幕外 50% 的中心位置。我只是不太清楚如何使行星的自转与太阳的中心对齐。我最接近解决这个问题的方法是水星沿着其轨道旋转大约一半，然后漂移到第二个轨道。这就是它目前的样子： 位置1 位置2

这是我的代码片段：

    <span class="sun"></span>
    <span class="mercury"></span>
    <span class="mercury_orbit"></span>

对于 App.css：

.sun {
  --sun-left: calc(-10vw); 
  --sun-top: 50%; 
  
  height: 20vw; 
  width: 20vw; 
  position: fixed;
  left: var(--sun-left); 
  top: var(--sun-top);  
  background-color: #f27500;
  border-radius: 50%;  
  display: inline-block;
  transform: translateY(-50%);  
  max-height: 350px;  
  max-width: 350px;   
  min-height: 150px;  
  min-width: 150px;  
}
.mercury {
  position: absolute;
  top: 50%;
  left: var(--sun-left);
  width: 125px;
  height: 125px;
  background-color: rgb(255, 255, 255);
  border-radius: 50%;
  
  transform-origin: -0.5vw;
  
  transform: rotate(0deg) translateX(280px);
  
  animation: orbitMercury 10s linear infinite;
}

@keyframes orbitMercury {
  0% {
    transform: rotate(0deg) translateX(280px);
  }
  100% {
    transform: rotate(360deg) translateX(280px);
  }
}
.mercury_orbit {
  position: fixed; 
  top: 50%; 
  left: calc(-280px); 
  width: 560px; 
  height: 560px; 
  background-color: transparent; 
  border: 1px solid rgb(255, 255, 255); 
  border-radius: 50%; 
  transform: translateY(-50%); 
}

我尝试了几种方法，例如：将太阳的位置分配给变量并使用该变量来定位水星，使用不同的单位进行变换原点，如 vw、% 和 px。

Answer 1

您可以平移水星 -50%、-50% 使其居中，然后旋转到预期角度并平移到轨道半径。

示例：

.mercury {
  --mercury-center: translate(-50%, -50%);
  --mercury-orbit-radius: translateX(280px);

  position: absolute;
  top: 50%;
  left: 0;
  width: 125px;
  height: 125px;
  background-color: rgb(255, 255, 255);
  border-radius: 50%;

  transform: var(--mercury-center) rotate(0deg) var(-mercury--orbit-radius);

  animation: orbitMercury 10s linear infinite;
}

@keyframes orbitMercury {
  0% {
    transform: var(--mercury-center) rotate(0deg) var(-mercury--orbit-radius);
  }
  100% {
    transform: var(--mercury-center) rotate(360deg) var(-mercury--orbit-radius);
  }
}