css制作旋转相册

使用 CSS 制作旋转相册

基本结构

HTML 部分需要创建一个容器来放置图片元素，每张图片需要单独定位。

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

关键 CSS 样式

通过 transform 和 animation 实现旋转效果。

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

.photo-album img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

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

3D 空间布局

为每张图片设置不同的旋转角度，形成环形排列。

.photo-album img:nth-child(1) { transform: rotateY(0deg) translateZ(200px); }
.photo-album img:nth-child(2) { transform: rotateY(72deg) translateZ(200px); }
.photo-album img:nth-child(3) { transform: rotateY(144deg) translateZ(200px); }
.photo-album img:nth-child(4) { transform: rotateY(216deg) translateZ(200px); }
.photo-album img:nth-child(5) { transform: rotateY(288deg) translateZ(200px); }

交互优化

添加悬停暂停效果，提升用户体验。

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

响应式调整

通过媒体查询适配不同屏幕尺寸。

@media (max-width: 600px) {
  .photo-album {
    width: 200px;
    height: 200px;
  }
  .photo-album img {
    transform: rotateY(var(--angle)) translateZ(120px);
  }
}

扩展功能

添加过渡效果使交互更平滑。

.photo-album img {
  transition: transform 0.5s ease;
}
.photo-album:hover img {
  transform: rotateY(var(--angle)) translateZ(250px);
}

完整实现需要根据实际图片数量调整旋转角度（360°/图片数量），并通过 CSS 变量或预处理器优化代码结构。