3d轮播图特效代码css 3张图

以下是一个基本的3D轮播图特效代码，包含3张图。你可以根据自己的需求修改和调整样式：

HTML代码：

<div class="carousel">
  <figure class="carousel__item">
    <img src="https://via.placeholder.com/500x300" alt="Carousel Image 1">
  </figure>
  <figure class="carousel__item">
    <img src="https://via.placeholder.com/500x300" alt="Carousel Image 2">
  </figure>
  <figure class="carousel__item">
    <img src="https://via.placeholder.com/500x300" alt="Carousel Image 3">
  </figure>
</div>

CSS代码：

.carousel {
  position: relative;
  width: 100%;
  height: 300px;
  perspective: 1000px;
}

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

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

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

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

.carousel:hover .carousel__item {
  transform: rotateY(-120deg);
}

解释说明：

- `perspective: 1000px;` 设置透视距离为1000像素，用于创建3D效果
- `.carousel__item` 定义轮播项的样式，设置绝对定位、宽高为100%以及3D变换样式
- `.carousel__item:nth-child(n)` 设置每个轮播项的3D变换，其中 `:nth-child(n)` 表示该样式将应用到第n个子元素
- `.carousel:hover .carousel__item` 定义鼠标悬停时的3D变换，将所有轮播项旋转-120度

请注意，这只是一个基本的3D轮播图特效，你可以根据自己的需求进行修改和扩展。