css实现3个盒子3d旋转动画

以下是CSS实现3个盒子3D旋转动画的代码和步骤：

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.container {
  perspective: 1000px; /* 视距，决定了3D效果的大小 */
}

.box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  position: relative;
  transform-style: preserve-3d; /* 触发3D效果 */
  animation: rotate 5s infinite linear; /* 添加旋转动画 */
}

.box:nth-child(1) {
  transform: rotateY(0deg) translateZ(150px);
}

.box:nth-child(2) {
  transform: rotateY(120deg) translateZ(150px);
}

.box:nth-child(3) {
  transform: rotateY(240deg) translateZ(150px);
}

@keyframes rotate {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

步骤：
1. 创建一个包含三个盒子的容器。
2. 为容器设置透视效果，即perspective属性。
3. 为每个盒子设置宽高和背景颜色，并将它们的position属性设置为relative。
4. 为每个盒子设置transform-style属性为preserve-3d，以触发3D效果。
5. 为每个盒子设置transform属性，通过rotateY()函数实现沿Y轴旋转，并通过translateZ()函数实现沿Z轴平移，使它们分布在3D空间中。
6. 为每个盒子添加旋转动画，通过animation属性实现。
7. 创建一个名为rotate的关键帧动画，通过transform属性实现旋转。