旋转相册制作css文件

旋转相册制作CSS文件

旋转相册通常通过CSS的transform和animation属性实现，结合HTML结构创建3D视觉效果。以下是实现旋转相册的核心CSS代码示例：

基础HTML结构

<div class="photo-album">
  <div class="photo"></div>
  <div class="photo"></div>
  <div class="photo"></div>
  <!-- 更多照片... -->
</div>

关键CSS代码

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

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

/* 为每个照片设置不同的旋转角度 */
.photo:nth-child(1) { transform: rotateY(0deg) translateZ(200px); }
.photo:nth-child(2) { transform: rotateY(60deg) translateZ(200px); }
.photo:nth-child(3) { transform: rotateY(120deg) translateZ(200px); }
.photo:nth-child(4) { transform: rotateY(180deg) translateZ(200px); }
.photo:nth-child(5) { transform: rotateY(240deg) translateZ(200px); }
.photo:nth-child(6) { transform: rotateY(300deg) translateZ(200px); }

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

自定义调整建议

• 尺寸调整：修改.photo-album的width和height改变相册大小，调整translateZ值控制照片间距。
• 速度控制：修改animation中的10s调整旋转速度（数值越小越快）。
• 照片数量：每增加一张照片需补充对应的nth-child规则，角度按360°均分（如5张照片时每张间隔72°）。

增强效果

添加悬停暂停效果：

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

添加背景渐变：

body {
  background: radial-gradient(circle, #f5f7fa, #c3cfe2);
}

完整实现时需将.photo的background替换为实际图片URL，或通过HTML的<img>标签嵌入图片。