当前位置：首页 > CSS

旋转相册制作css

2026-02-27 00:04:03CSS

旋转相册制作 CSS

制作旋转相册主要依赖 CSS 的 transform 和 animation 属性，结合 3D 变换效果实现。以下是实现步骤和代码示例：

基本结构

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 样式

设置容器为 3D 空间，并定义图片的旋转动画：

旋转相册制作css

.photo-album {
  width: 300px;
  height: 300px;
  position: relative;
  margin: 50px auto;
  transform-style: preserve-3d;
  animation: rotate 10s 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); }

交互优化

添加悬停暂停效果：

旋转相册制作css

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

完整示例

将上述代码组合后，即可实现一个自动旋转的 3D 相册。调整 translateZ 的值可以改变相册半径，修改 rotateY 的角度间隔可增减图片数量。

响应式调整

针对不同屏幕尺寸优化：

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

通过调整动画时长（10s）和旋转方式（linear），可实现不同的视觉效果，如缓动旋转或变速旋转。