当前位置：首页 > CSS

css制作立体相册

2026-04-01 23:47:45CSS

使用CSS 3D变换创建立体相册

通过CSS的transform-style、perspective和rotate等属性可以实现3D立体相册效果。以下是实现步骤：

HTML结构

<div class="photo-album">
  <div class="photo">照片1</div>
  <div class="photo">照片2</div>
  <div class="photo">照片3</div>
  <div class="photo">照片4</div>
</div>

基础CSS设置

.photo-album {
  width: 300px;
  height: 200px;
  position: relative;
  margin: 100px auto;
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: transform 1s;
}

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

3D排列照片

为每个照片设置不同的旋转角度和Z轴位移，形成环形排列：

.photo:nth-child(1) {
  background: url(photo1.jpg);
  transform: rotateY(0deg) translateZ(150px);
}
.photo:nth-child(2) {
  background: url(photo2.jpg);
  transform: rotateY(90deg) translateZ(150px);
}
.photo:nth-child(3) {
  background: url(photo3.jpg);
  transform: rotateY(180deg) translateZ(150px);
}
.photo:nth-child(4) {
  background: url(photo4.jpg);
  transform: rotateY(270deg) translateZ(150px);
}

添加交互旋转效果

通过JavaScript或CSS hover实现相册旋转：

.photo-album:hover {
  transform: rotateY(180deg);
}

或使用JavaScript控制：

let currentAngle = 0;
document.querySelector('.photo-album').addEventListener('click', () => {
  currentAngle += 90;
  this.style.transform = `rotateY(${currentAngle}deg)`;
});

优化3D视觉效果

添加背面可见性和过渡效果增强立体感：

.photo {
  backface-visibility: hidden;
  transition: transform 0.8s ease;
}

.photo-album {
  transform-origin: center;
}

响应式调整

根据不同屏幕尺寸调整相册大小：

css制作立体相册

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

  .photo {
    transform: rotateY(var(--angle)) translateZ(100px);
  }
}

完整实现可通过调整照片数量、旋转角度和Z轴距离来创建不同风格的立体相册效果。增加更多照片时，需按360度均匀分配旋转角度（如6张照片则每60度一个）。