当前位置：首页 > CSS

css立体相册制作

2026-02-12 14:48:22CSS

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

通过CSS的transform-style和perspective属性实现3D效果，结合动画让相册具有立体翻转交互。

<div class="photo-album">
  <div class="album-cover">封面</div>
  <div class="album-page">页面1</div>
  <div class="album-page">页面2</div>
</div>

.photo-album {
  width: 300px;
  height: 400px;
  position: relative;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.album-cover, .album-page {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border: 1px solid #ddd;
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
  transform-origin: left center;
  transition: transform 1s;
}

.album-cover {
  background: url('cover.jpg') center/cover;
}

.album-page:nth-child(2) {
  transform: rotateY(30deg);
}

.album-page:nth-child(3) {
  transform: rotateY(60deg);
}

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

照片堆叠效果实现

利用z-index和轻微旋转创建层叠视觉效果，适合展示多张照片的立体排列。

.photo-stack {
  position: relative;
  width: 300px;
  height: 200px;
  margin: 50px auto;
}

.photo-stack img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 10px solid white;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  transition: all 0.3s;
}

.photo-stack img:nth-child(1) {
  z-index: 3;
  transform: rotate(3deg);
}

.photo-stack img:nth-child(2) {
  z-index: 2;
  transform: rotate(-2deg);
}

.photo-stack img:nth-child(3) {
  z-index: 1;
  transform: rotate(5deg);
}

.photo-stack:hover img {
  transform: rotate(0) scale(1.1);
  z-index: 4;
}

3D旋转木马画廊

通过环形排列元素并添加旋转动画，创建可交互的3D照片展示效果。

.carousel {
  width: 300px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  animation: rotate 20s infinite linear;
}

.carousel-item {
  position: absolute;
  width: 150px;
  height: 100px;
  left: 50%;
  top: 50%;
  transform-origin: center 200px;
}

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

/* 为每个项目设置不同旋转角度 */
.carousel-item:nth-child(1) { transform: rotateY(0deg) translateZ(200px); }
.carousel-item:nth-child(2) { transform: rotateY(60deg) translateZ(200px); }
.carousel-item:nth-child(3) { transform: rotateY(120deg) translateZ(200px); }
/* 继续添加更多项目... */

照片翻页动画

模拟真实相册翻页效果，使用CSS关键帧动画实现平滑过渡。

.page-flip {
  width: 300px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
}

.page {
  position: absolute;
  width: 100%;
  height: 100%;
  background: white;
  border: 1px solid #ccc;
  transform-origin: left center;
  animation: flip 5s infinite;
}

@keyframes flip {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(-160deg); }
  100% { transform: rotateY(0deg); }
}

响应式调整

为不同屏幕尺寸添加媒体查询，确保3D效果在不同设备上正常显示。

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

  .carousel {
    width: 200px;
    height: 150px;
  }

  .carousel-item {
    transform-origin: center 150px;
  }
}

这些技术可以组合使用或单独实现，通过调整参数如旋转角度、过渡时间和透视距离，能够创建各种不同风格的立体相册效果。实际应用中建议添加JavaScript事件监听器来实现更精确的交互控制。

css立体相册制作