SOURCE

const orbitStyle = {
  transform: `rotateX(70deg) rotateZ(${100 * -72}deg) translateZ(0)`,
};
const planetStyle = (index, l) => {
  // l是数组的长度
  const average = l / 2; 
  const gap = 0.8 ** (average - Math.abs(Math.abs(index - (100 % l)) - average)); // 先求不同球不同时间的绝对值来计算点在区间的距离，再根据距离计算改变值
  return {
    transform: `rotateX(-90deg) rotateY(${360 -
      activeCircle * 72}deg) rotateZ(0deg) scale(${gap})`,
    opacity: gap,
  };
};

 <!-- 轨道 -->
<div class="orbit">
  <!-- 行星 -->
  <div class="planet planet1">
    <!-- <span class="name"></span> -->
  </div>
  <div class="planet planet2">
    <!-- <span class="name"></span> -->
  </div>
  <div class="planet planet3">
    <!-- <span class="name"></span> -->
  </div>
  <div class="planet planet4">
    <!-- <span class="name"></span> -->
  </div>
</div>

/* //轨道旋转，公转 */
/* body */
body{
    background: #555;
}
.orbit { 
  border: 5px solid rgb(10, 148, 228);
  transform-style: preserve-3d;
  padding: 65px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  animation: orbit-rotate 10s linear infinite;
}
/* ／／星球自转 */
.planet { 
  width: 80px;
  height: 80px;
  border: 4px solid green;
  
  /* background: url('../../img/ball1.png') no-repeat; */
  background-size: 100% 100%;
  border-radius: 50%;
  animation: self-rotate 10s linear infinite;
  transform: rotateX(-90deg)
}
/* （1）rotateX 是为了让整个面倾斜，translateZ是为了防止
椭圆（border）因为倾斜发生锯齿，
（2）停顿效果的产生，其实我是走了野路子的。五个球，
根据360/5=72,写了五个不同的关于orbit的class，
0 + 72，....360依次增加72，直到360，利用setimeout每隔4秒，
按顺序切换一个class */
@keyframes orbit-rotate { 
  0% {
    transform: rotateX(70deg) rotateZ(0deg) translateZ(0); 
  }

  100% {
    transform: rotateX(70deg) rotateZ(-360deg) translateZ(0);
  }
}
@keyframes self-rotate {
  0% {
      filter: hue-rotate(0deg);
    transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg);
  }

  100% {
      filter: hue-rotate(360deg);
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  }
}
.planet1 { 
  position: absolute;
  top: 65px;
  right: 65px;
  background: rgba(49, 125, 210, alpha0.8);
}

.planet2 { 
  position: absolute;
  bottom: 65px;
  right: 65px;
  background: rgba(49, 125, 210, alpha0.8);
}
.planet3 { 
  position: absolute;
  top: 65px;
  left: 65px;
  background: rgba(49, 125, 210, alpha0.8);
}
.planet4 { 
  position: absolute;
  bottom: 65px;
  left: 65px;
  background: rgba(49, 125, 210, alpha0.8);
}