css制作旋转相册

使用CSS制作旋转相册

基础HTML结构

创建一个包含多个图片的容器，每个图片作为相册的一部分。

<div class="photo-album">
  <div class="photo"><img src="image1.jpg" alt="Photo 1"></div>
  <div class="photo"><img src="image2.jpg" alt="Photo 2"></div>
  <div class="photo"><img src="image3.jpg" alt="Photo 3"></div>
  <div class="photo"><img src="image4.jpg" alt="Photo 4"></div>
</div>

关键CSS样式

通过CSS的transform和animation属性实现旋转效果。

.photo-album {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 50px auto;
  transform-style: preserve-3d;
  animation: rotate 15s infinite linear;
}

.photo {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

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

3D空间定位

为每个图片设置不同的旋转角度，使其围绕中心点排列。

.photo:nth-child(1) { transform: rotateY(0deg) translateZ(200px); }
.photo:nth-child(2) { transform: rotateY(90deg) translateZ(200px); }
.photo:nth-child(3) { transform: rotateY(180deg) translateZ(200px); }
.photo:nth-child(4) { transform: rotateY(270deg) translateZ(200px); }

悬停暂停效果

添加交互效果，鼠标悬停时暂停旋转。

.photo-album:hover {
  animation-play-state: paused;
}

响应式调整

确保在不同屏幕尺寸下正常显示。

@media (max-width: 600px) {
  .photo-album {
    width: 200px;
    height: 200px;
  }
  .photo:nth-child(n) {
    transform: rotateY(calc(var(--i)*90deg)) translateZ(150px);
  }
}

注意事项

• 图片数量可以根据需求增减，需同步调整旋转角度。
• translateZ值控制图片距离中心的远近，影响3D效果强度。
• 调整animation的持续时间可改变旋转速度。