如何在CSS中让.box围绕旋转的.circle公转并分布图片？

核心实现思路 #

用CSS 3D变换和动画特性，让环绕元素沿着轨道绕中心元素旋转，同时通过角度定位实现图片的环形空间分布，模拟类似环与地球的运动关系。

完整代码示例 #

HTML结构 #

<div class="container">
  <!-- 中心元素（对应“地球”） -->
  <div class="circle">
    <img src="你的中心图地址" alt="中心对象">
  </div>
  <!-- 环绕轨道容器 -->
  <div class="orbit">
    <!-- 环绕元素（用图片替代字母） -->
    <div class="box"><img src="环绕图1地址" alt="环绕对象1"></div>
    <div class="box"><img src="环绕图2地址" alt="环绕对象2"></div>
    <div class="box"><img src="环绕图3地址" alt="环绕对象3"></div>
    <div class="box"><img src="环绕图4地址" alt="环绕对象4"></div>
    <div class="box"><img src="环绕图5地址" alt="环绕对象5"></div>
    <div class="box"><img src="环绕图6地址" alt="环绕对象6"></div>
  </div>
</div>

CSS样式 #

/* 开启3D透视空间 */
.container {
  position: relative;
  width: 450px;
  height: 450px;
  margin: 80px auto;
  perspective: 900px; /* 透视强度，值越小立体感越强 */
  transform-style: preserve-3d;
}

/* 中心元素样式 */
.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.circle img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* 环绕轨道容器：承载所有.box并执行旋转动画 */
.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 350px;
  height: 350px;
  transform: translate(-50%, -50%) rotateX(65deg); /* rotateX控制轨道倾斜角度 */
  transform-style: preserve-3d;
  animation: loopRotate 15s linear infinite; /* 轨道旋转动画 */
}

/* 环绕元素基础样式 */
.box {
  position: absolute;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden; /* 隐藏元素背面，避免翻转时显示 */
}
.box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 给每个.box设置角度，实现环形空间分布 */
.box:nth-child(1) {
  transform: rotateY(0deg) translateZ(175px); /* translateZ值为轨道半径（350/2） */
}
.box:nth-child(2) {
  transform: rotateY(60deg) translateZ(175px);
}
.box:nth-child(3) {
  transform: rotateY(120deg) translateZ(175px);
}
.box:nth-child(4) {
  transform: rotateY(180deg) translateZ(175px);
}
.box:nth-child(5) {
  transform: rotateY(240deg) translateZ(175px);
}
.box:nth-child(6) {
  transform: rotateY(300deg) translateZ(175px);
}

/* 轨道旋转动画关键帧 */
@keyframes loopRotate {
  from {
    transform: translate(-50%, -50%) rotateX(65deg) rotateY(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotateX(65deg) rotateY(360deg);
  }
}

关键参数调整说明 #

• 透视效果：修改.container的perspective值，调整空间透视强度。
• 轨道尺寸：修改.orbit的宽高，对应调整translateZ的数值（保持为宽高的一半）。
• 空间分布：如果环绕元素数量变化，重新计算每个元素的rotateY角度（360°除以元素数量）。
• 旋转速度：修改animation的时长（比如10s改为20s），控制环绕速度。
• 轨道倾斜：调整.orbit的rotateX值，改变轨道的空间倾斜角度。

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