css立体相册制作

制作CSS立体相册

使用CSS3的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 {
  perspective: 1000px;
  width: 300px;
  height: 200px;
  position: relative;
  margin: 100px auto;
}

.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;
  transform-style: preserve-3d;
}

/* 设置每张照片的初始位置和旋转角度 */
.photo:nth-child(1) {
  transform: rotateY(0deg) translateZ(200px);
  background-color: #ff9999;
}

.photo:nth-child(2) {
  transform: rotateY(90deg) translateZ(200px);
  background-color: #99ff99;
}

.photo:nth-child(3) {
  transform: rotateY(180deg) translateZ(200px);
  background-color: #9999ff;
}

.photo:nth-child(4) {
  transform: rotateY(270deg) translateZ(200px);
  background-color: #ffff99;
}

/* 悬停效果 */
.photo-album:hover .photo {
  transform: rotateY(0deg) translateZ(200px);
}

添加交互效果

为了让相册可以手动旋转，可以添加JavaScript控制：

let currentAngle = 0;
const album = document.querySelector('.photo-album');
const photos = document.querySelectorAll('.photo');

function rotateAlbum(angle) {
  currentAngle = angle;
  photos.forEach((photo, index) => {
    photo.style.transform = `rotateY(${currentAngle + index * 90}deg) translateZ(200px)`;
  });
}

// 添加按钮控制
document.getElementById('prev').addEventListener('click', () => {
  rotateAlbum(currentAngle - 90);
});

document.getElementById('next').addEventListener('click', () => {
  rotateAlbum(currentAngle + 90);
});

优化和扩展

添加背景图片代替纯色背景：

.photo:nth-child(1) {
  background-image: url('photo1.jpg');
}

调整动画缓动效果：

.photo {
  transition: transform 1s cubic-bezier(0.25, 0.1, 0.25, 1);
}

添加响应式设计：

@media (max-width: 600px) {
  .photo-album {
    perspective: 500px;
  }
  .photo {
    transform: rotateY(var(--angle)) translateZ(100px);
  }
}

这个实现创建了一个基本的3D立体相册，照片排列在立方体的四个面上，悬停时会展开，也可以通过按钮控制旋转。可以根据需要添加更多照片或调整样式。