React项目中HTML/CSS实现行星绕太阳轨道运行的问题

我首次做React项目（目前只用HTML和CSS），想实现行星绕太阳运行的太阳系效果，现在仅完成了水星及其轨道的基础搭建，太阳需要放在屏幕外50%的居中位置，但水星运行约半圈后就会偏离轨道，旋转中心始终无法和太阳中心对齐。

现有代码 #

HTML片段：

<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等不同单位设置transform-origin，但问题始终没解决。

解决方案 #

核心问题是水星的旋转原点（transform-origin）未精准对应太阳中心，且多元素定位参考系不统一，调整步骤如下：

1. 添加统一父容器，规范定位参考系
   给太阳、水星、轨道包裹一个父容器，让所有元素基于容器定位，避免fixed和absolute混合导致的偏移：

   <div class="solar-system">
     <span class="sun"></span>
     <span class="mercury_orbit"></span>
     <span class="mercury"></span>
   </div>
   

2. 定义太阳中心变量，明确基准坐标
   计算太阳的中心坐标并存储为CSS变量，方便水星和轨道复用：

   .solar-system {
     position: relative;
     width: 100vw;
     height: 100vh;
     overflow: hidden;
   }
   
   .sun {
     --sun-size: 20vw;
     --sun-left: calc(-10vw); /* 让太阳一半在屏幕外 */
     --sun-center-x: calc(var(--sun-left) + var(--sun-size)/2);
     --sun-center-y: 50%;
     
     width: var(--sun-size);
     height: var(--sun-size);
     position: absolute;
     left: var(--sun-left);
     top: var(--sun-center-y);
     background-color: #f27500;
     border-radius: 50%;
     transform: translateY(-50%);
     max-width: 350px;
     max-height: 350px;
     min-width: 150px;
     min-height: 150px;
   }
   

3. 精准设置水星旋转原点与轨道参数
   让水星的旋转原点直接指向太阳中心，同时匹配轨道圆环的半径（需减去水星自身半径的一半，避免行星边缘超出轨道）：

   .mercury {
     --orbit-radius: 280px;
     --planet-size: 125px;
     
     position: absolute;
     width: var(--planet-size);
     height: var(--planet-size);
     background-color: #fff;
     border-radius: 50%;
     /* 初始位置对齐太阳中心，再偏移轨道半径 */
     left: var(--sun-center-x);
     top: var(--sun-center-y);
     transform: translate(-50%, -50%) translateX(var(--orbit-radius));
     /* 旋转原点设为太阳中心 */
     transform-origin: calc(var(--sun-center-x) - 50% + var(--planet-size)/2) 50%;
     animation: orbitMercury 10s linear infinite;
   }
   
   @keyframes orbitMercury {
     100% {
       transform: translate(-50%, -50%) translateX(var(--orbit-radius)) rotate(360deg);
     }
   }
   
   .mercury_orbit {
     --orbit-radius: 280px;
     
     position: absolute;
     top: var(--sun-center-y);
     left: var(--sun-center-x);
     width: calc(var(--orbit-radius)*2);
     height: calc(var(--orbit-radius)*2);
     border: 1px solid #fff;
     border-radius: 50%;
     transform: translate(-50%, -50%);
   }
   

4. 关键逻辑说明

   • 父容器用relative定位，确保所有子元素的absolute定位都基于整个视口
   • 太阳中心坐标通过变量计算，让水星和轨道能精准对齐这个基准点
   • 水星先通过translate(-50%,-50%)让自身中心与太阳中心重合，再用translateX偏移轨道半径，最后叠加旋转动画
   • 轨道圆环同样基于太阳中心定位，通过translate(-50%,-50%)让圆环中心与太阳中心完全重合

调整后，水星的旋转中心会完全匹配太阳中心，轨道运行不会再出现偏移。

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