css立体相册制作

2026-01-16 10:37:20CSS

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;
  perspective: 1000px;
  margin: 100px auto;
  transform-style: preserve-3d;
}

.photo {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  border: 5px solid white;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  transition: transform 1s;
}

/* 为每个相片设置不同背景和3D位置 */
.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(60deg) translateZ(200px);
}
.photo:nth-child(3) {
  background-image: url('photo3.jpg');
  transform: rotateY(120deg) translateZ(200px);
}
.photo:nth-child(4) {
  background-image: url('photo4.jpg');
  transform: rotateY(180deg) translateZ(200px);
}
.photo:nth-child(5) {
  background-image: url('photo5.jpg');
  transform: rotateY(240deg) translateZ(200px);
}
.photo:nth-child(6) {
  background-image: url('photo6.jpg');
  transform: rotateY(300deg) translateZ(200px);
}

/* 添加悬停效果 */
.photo-album:hover {
  animation: rotate 10s infinite linear;
}

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

实现原理

使用CSS的3D变换属性transform-style: preserve-3d创建3D空间，通过perspective设置透视效果。每个相片通过rotateY和translateZ定位在3D空间的不同位置，形成立体环绕效果。

@keyframes动画使相册自动旋转，悬停时触发动画效果。transition属性为变换添加平滑过渡。

增强效果

添加阴影和边框增强立体感：

.photo {
  box-shadow: 
    0 0 20px rgba(0,0,0,0.5),
    inset 0 0 20px rgba(0,0,0,0.2);
  border: 10px solid #fff;
  border-radius: 5px;
}

响应式调整

通过媒体查询适应不同屏幕尺寸：

css立体相册制作

@media (max-width: 600px) {
  .photo-album {
    width: 200px;
    height: 150px;
    perspective: 500px;
  }

  .photo {
    transform: scale(0.8) !important;
  }
}

以上代码创建了一个六面立体相册，悬停时会自动旋转展示所有照片。实际使用时需要替换为真实的图片URL，并可根据需要调整相片数量、大小和旋转速度。