旋转相册制作css

旋转相册制作 CSS

要实现一个旋转相册效果，可以使用 CSS 的 transform 和 animation 属性。以下是一个完整的实现方法：

HTML 结构

<div class="photo-album">
  <div class="photo"></div>
  <div class="photo"></div>
  <div class="photo"></div>
  <div class="photo"></div>
  <div class="photo"></div>
</div>

CSS 样式

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

.photo {
  width: 100%;
  height: 100%;
  position: absolute;
  background-size: cover;
  background-position: center;
  opacity: 0.9;
  border: 2px solid white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

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

为每个照片设置不同位置

.photo:nth-child(1) {
  background-image: url('photo1.jpg');
  transform: rotateY(0deg) translateZ(200px);
}

.photo:nth-child(2) {
  background-image: url('photo2.jpg');
  transform: rotateY(72deg) translateZ(200px);
}

.photo:nth-child(3) {
  background-image: url('photo3.jpg');
  transform: rotateY(144deg) translateZ(200px);
}

.photo:nth-child(4) {
  background-image: url('photo4.jpg');
  transform: rotateY(216deg) translateZ(200px);
}

.photo:nth-child(5) {
  background-image: url('photo5.jpg');
  transform: rotateY(288deg) translateZ(200px);
}

关键点说明

• transform-style: preserve-3d 保持3D变换效果
• animation 创建无限旋转动画
• rotateY 控制每张照片的旋转角度
• translateZ 设置照片与中心的距离
• 角度计算：360°除以照片数量（如5张就是72°间隔）

自定义调整

• 调整 translateZ 值可改变照片与中心的距离
• 修改 animation-duration 可改变旋转速度
• 增加更多照片需均匀分配角度（如6张照片间隔60°）
• 添加悬停暂停效果：

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

浏览器兼容性

• 现代浏览器均支持此效果
• 如需支持旧版浏览器，需添加前缀（-webkit-, -moz-, -ms-）
• 确保照片路径正确或替换为实际图片URL

此实现创建了一个3D旋转相册效果，照片会围绕中心轴缓慢旋转展示。可根据需要调整照片数量、大小、旋转速度和样式。