旋转相册制作css

旋转相册制作CSS

要实现一个旋转相册效果，可以通过CSS的动画和3D变换属性完成。以下是一个完整的实现方法：

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 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;
  background-position: center;
  opacity: 0.9;
  border: 2px solid white;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

/* 为每个照片设置不同的背景和3D位置 */
.photo:nth-child(1) {
  background-image: url('photo1.jpg');
  transform: rotateY(0deg) translateZ(250px);
}
.photo:nth-child(2) {
  background-image: url('photo2.jpg');
  transform: rotateY(60deg) translateZ(250px);
}
.photo:nth-child(3) {
  background-image: url('photo3.jpg');
  transform: rotateY(120deg) translateZ(250px);
}
.photo:nth-child(4) {
  background-image: url('photo4.jpg');
  transform: rotateY(180deg) translateZ(250px);
}
.photo:nth-child(5) {
  background-image: url('photo5.jpg');
  transform: rotateY(240deg) translateZ(250px);
}
.photo:nth-child(6) {
  background-image: url('photo6.jpg');
  transform: rotateY(300deg) translateZ(250px);
}

/* 旋转动画 */
@keyframes rotate {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

实现要点

1. 使用transform-style: preserve-3d保持3D变换效果
2. 每张照片通过rotateY和translateZ定位在3D空间中
3. 动画通过@keyframes定义旋转效果
4. 照片数量可以根据需要增减，调整角度间隔（如5张照片则每72度一张）

自定义调整

• 修改translateZ值调整相册半径大小
• 调整animation-duration改变旋转速度
• 添加hover暂停效果：

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

浏览器兼容性

需注意添加浏览器前缀以确保兼容性：

-webkit-transform-style: preserve-3d;
-webkit-animation: rotate 10s infinite linear;