3d旋转相册代码html和css

3D旋转相册是一种常见的网页设计效果，可以通过HTML和CSS代码来实现。以下是一个简单的示例代码：

HTML代码：

<div class="carousel">
  <div class="carousel-item item1"></div>
  <div class="carousel-item item2"></div>
  <div class="carousel-item item3"></div>
  <div class="carousel-item item4"></div>
  <div class="carousel-item item5"></div>
</div>

CSS代码：

.carousel {
  width: 500px;
  height: 300px;
  margin: 0 auto;
  position: relative;
  transform-style: preserve-3d;
}

.carousel-item {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
  border-radius: 10px;
}

.item1 {
  transform: rotateY(0deg) translateZ(250px);
}

.item2 {
  transform: rotateY(72deg) translateZ(250px);
}

.item3 {
  transform: rotateY(144deg) translateZ(250px);
}

.item4 {
  transform: rotateY(216deg) translateZ(250px);
}

.item5 {
  transform: rotateY(288deg) translateZ(250px);
}

这段代码中，`.carousel`是相册容器，`.carousel-item`是相片，通过使用`transform`属性来实现3D旋转效果，`rotateY`表示绕Y轴旋转的角度，`translateZ`表示沿Z轴移动的距离。你可以根据自己的需要调整相册和相片的大小、数量和位置，来创建你自己的3D旋转相册。