如何实现多圆形环绕中心的CSS动画？（仅适配Chrome）

嘿，我来帮你搞定这个多圆立体环绕的动画难题！针对你说的让圆形在不同平面、不同角度环绕的需求，CSS 3D变换（rotateX/Y/Z配合transform-style: preserve-3d）就是最优解，而且Chrome对这些属性的支持非常完善，完全不用愁兼容性问题。

核心思路拆解 #

要实现不同平面的环绕，本质是让每个环绕圆先处于不同的3D空间平面，再绕中心做圆周运动。具体分三步：

1. 搭建3D环境
   给父容器设置perspective（控制3D透视强度）和transform-style: preserve-3d（让子元素的3D变换生效，不会被扁平化）：

   .container {
     perspective: 1000px; /* 值越小立体感越强，按需调整 */
     transform-style: preserve-3d;
     position: relative;
   }
   

2. 给每个环绕圆设置初始3D姿态
   通过rotateX/Y/Z把每个圆转到不同的平面，再用translateZ（或X/Y）移到环绕轨道的位置：

   .circle-1 {
     /* 先转到X轴45度的平面，再移到距离中心150px的轨道上 */
     transform: rotateX(45deg) translateZ(150px);
   }
   .circle-2 {
     /* 转到Y轴60度的平面，再移到轨道 */
     transform: rotateY(60deg) translateZ(150px);
   }
   

3. 添加环绕动画
   给每个圆添加独立的动画，绕对应的轴旋转，就能让它在自己的平面上环绕中心。比如第一个圆初始转了X轴，动画就绕Y轴旋转：

   @keyframes orbit1 {
     0% { transform: rotateX(45deg) translateZ(150px) rotateY(0deg); }
     100% { transform: rotateX(45deg) translateZ(150px) rotateY(360deg); }
   }
   

完整示例代码 #

下面是一个可直接运行的示例，你可以参考调整：

<div class="container">
  <div class="center-circle"></div>
  <div class="orbit-circle circle-1"></div>
  <div class="orbit-circle circle-2"></div>
  <div class="orbit-circle circle-3"></div>
</div>

.container {
  width: 400px;
  height: 400px;
  margin: 50px auto;
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
}

.center-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #ff4444;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.orbit-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.circle-1 {
  background: #2196f3;
  transform: rotateX(45deg) translateZ(150px);
  animation: orbit1 5s linear infinite;
}

.circle-2 {
  background: #4caf50;
  transform: rotateY(60deg) translateZ(150px);
  animation: orbit2 5s linear infinite;
}

.circle-3 {
  background: #ffeb3b;
  transform: rotateX(-30deg) rotateY(45deg) translateZ(150px);
  animation: orbit3 5s linear infinite;
}

@keyframes orbit1 {
  0% { transform: rotateX(45deg) translateZ(150px) rotateY(0deg); }
  100% { transform: rotateX(45deg) translateZ(150px) rotateY(360deg); }
}

@keyframes orbit2 {
  0% { transform: rotateY(60deg) translateZ(150px) rotateX(0deg); }
  100% { transform: rotateY(60deg) translateZ(150px) rotateX(360deg); }
}

@keyframes orbit3 {
  0% { transform: rotateX(-30deg) rotateY(45deg) translateZ(150px) rotateZ(0deg); }
  100% { transform: rotateX(-30deg) rotateY(45deg) translateZ(150px) rotateZ(360deg); }
}

关键注意点 #

• 一定要给父容器加transform-style: preserve-3d，否则所有3D变换都会被压缩成2D，看不到立体效果。
• 动画里要保留初始的rotate变换，只添加绕轨道的旋转，不然圆会脱离原本的平面。
• 可以通过调整perspective的值来控制立体感强弱，数值越小，透视效果越明显。

这种方案用纯CSS实现，性能比JS控制好很多，而且完全适配Chrome，刚好符合你的需求！

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