当前位置：首页 > CSS

css立体相册制作

2026-02-26 23:31:04CSS

立体相册制作方法

使用CSS的3D变换和动画效果可以创建立体相册。以下是实现步骤：

HTML结构

css立体相册制作

<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: 50px auto;
}

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

/* 设置每张照片的初始3D位置 */
.photo:nth-child(1) { transform: rotateY(0deg) translateZ(250px); }
.photo:nth-child(2) { transform: rotateY(90deg) translateZ(250px); }
.photo:nth-child(3) { transform: rotateY(180deg) translateZ(250px); }
.photo:nth-child(4) { transform: rotateY(270deg) translateZ(250px); }

/* 悬停时旋转整个相册 */
.photo-album:hover {
  animation: rotateAlbum 10s infinite linear;
}

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

增强交互效果

添加点击放大功能：

css立体相册制作

.photo {
  cursor: pointer;
}

.photo:active {
  transform: scale(1.5) translateZ(300px);
  z-index: 10;
}

响应式调整

针对不同屏幕尺寸调整相册大小：

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

  .photo:nth-child(n) {
    transform-origin: center center;
  }
}

添加背景和装饰

完善整体视觉效果：

body {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo {
  background: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  font-weight: bold;
}

通过组合3D变换、过渡和动画，可以创建出具有立体旋转效果的相册。调整perspective值可以改变3D效果的强度，而transform-style: preserve-3d确保子元素保持3D空间关系。