HTML CSS 旋转图片：创建 6 张图片旋转效果

以下是一份使用 HTML 和 CSS 实现旋转图片的示例代码。其中包括了 6 个图片分别旋转在一起的效果。

HTML 代码：

<div class='container'>
  <div class='image-container'>
    <img src='https://via.placeholder.com/150' alt='image'>
  </div>
  <div class='image-container'>
    <img src='https://via.placeholder.com/150' alt='image'>
  </div>
  <div class='image-container'>
    <img src='https://via.placeholder.com/150' alt='image'>
  </div>
  <div class='image-container'>
    <img src='https://via.placeholder.com/150' alt='image'>
  </div>
  <div class='image-container'>
    <img src='https://via.placeholder.com/150' alt='image'>
  </div>
  <div class='image-container'>
    <img src='https://via.placeholder.com/150' alt='image'>
  </div>
</div>

CSS 代码：

.container {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  perspective: 1000px;
}

.image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: rotate 6s linear infinite;
}

.image-container:nth-child(1) {
  transform: rotateY(0deg) translateZ(100px);
}

.image-container:nth-child(2) {
  transform: rotateY(60deg) translateZ(100px);
}

.image-container:nth-child(3) {
  transform: rotateY(120deg) translateZ(100px);
}

.image-container:nth-child(4) {
  transform: rotateY(180deg) translateZ(100px);
}

.image-container:nth-child(5) {
  transform: rotateY(240deg) translateZ(100px);
}

.image-container:nth-child(6) {
  transform: rotateY(300deg) translateZ(100px);
}

@keyframes rotate {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

在这份代码中，我们创建了一个包含 6 个图片的容器（.container），并且使用了 perspective 属性来设置透视效果。每个图片都包裹在一个容器（.image-container）中，并且使用了 transform-style: preserve-3d 属性来开启 3D 效果。我们使用了 transform 属性来设置每个图片的旋转角度和距离，同时使用了 animation 属性来实现无限循环的旋转动画。

你可以将 src 属性中的图片链接替换成自己的图片链接，以便实现你自己的效果。