4张图片3D轮播效果css

以下是一个简单的基于CSS的3D轮播效果，可以实现4张图片的展示：

HTML代码：

<div class="carousel">
  <figure class="slide">
    <img src="image1.jpg" alt="Image 1">
  </figure>
  <figure class="slide">
    <img src="image2.jpg" alt="Image 2">
  </figure>
  <figure class="slide">
    <img src="image3.jpg" alt="Image 3">
  </figure>
  <figure class="slide">
    <img src="image4.jpg" alt="Image 4">
  </figure>
</div>

CSS代码：

.carousel {
  position: relative;
  width: 100%;
  height: 500px;
  perspective: 1500px;
  margin: 0 auto;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.slide:nth-child(1) {
  transform: translateZ(0);
}

.slide:nth-child(2) {
  transform: rotateY(90deg) translateZ(200px);
}

.slide:nth-child(3) {
  transform: rotateY(180deg) translateZ(200px);
}

.slide:nth-child(4) {
  transform: rotateY(270deg) translateZ(200px);
}

.carousel:hover .slide {
  transform: rotateY(-90deg);
}

.slide img {
  display: block;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  object-fit: cover;
}

解释：

- `perspective` 属性定义了观察者距离物体的距离，用于增强3D效果。
- `transform-style` 属性定义了子元素如何在3D空间中呈现，`preserve-3d` 值表示子元素保留其3D位置。
- `transform` 属性定义了元素的变换，包括平移、旋转、缩放等操作。`translateZ` 表示在z轴上平移，`rotateY` 表示绕y轴旋转。
- `transition` 属性定义了元素变换的过渡效果。
- `backface-visibility` 属性定义了元素背面是否可见，`hidden` 值表示不可见。
- `object-fit` 属性定义了图片如何适应元素的大小，`cover` 值表示保持宽高比例，填充元素。

点击鼠标滚轮可以进行交互，左右移动鼠标可以旋转轮播图。可以根据实际需求进行调整。