css立体相册制作

2026-03-31 22:44:36CSS

使用CSS 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 class="photo">照片5</div>
  <div class="photo">照片6</div>
</div>

基础CSS样式

.photo-album {
  width: 300px;
  height: 200px;
  position: relative;
  perspective: 1000px;
  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;
}

实现3D旋转效果

立方体相册实现

css立体相册制作

.photo:nth-child(1) {
  background-image: url('photo1.jpg');
  transform: rotateY(0deg) translateZ(150px);
}
.photo:nth-child(2) {
  background-image: url('photo2.jpg');
  transform: rotateY(60deg) translateZ(150px);
}
.photo:nth-child(3) {
  background-image: url('photo3.jpg');
  transform: rotateY(120deg) translateZ(150px);
}
.photo:nth-child(4) {
  background-image: url('photo4.jpg');
  transform: rotateY(180deg) translateZ(150px);
}
.photo:nth-child(5) {
  background-image: url('photo5.jpg');
  transform: rotateY(240deg) translateZ(150px);
}
.photo:nth-child(6) {
  background-image: url('photo6.jpg');
  transform: rotateY(300deg) translateZ(150px);
}

.photo-album {
  transform-style: preserve-3d;
  animation: rotate 20s infinite linear;
}

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

添加交互效果

悬停暂停动画

.photo-album:hover {
  animation-play-state: paused;
}

.photo:hover {
  transform: scale(1.2) translateZ(200px);
  z-index: 10;
}

响应式设计调整

适应不同屏幕尺寸

css立体相册制作

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

  .photo {
    transform: scale(0.9);
  }
}

高级3D效果增强

添加景深效果

.photo {
  filter: brightness(0.9);
}

.photo:nth-child(1) {
  filter: brightness(1.1);
}

.photo:hover {
  filter: brightness(1.2) drop-shadow(0 0 10px rgba(255,255,255,0.7));
}

阴影和反射效果

.photo-album::after {
  content: '';
  position: absolute;
  bottom: -50px;
  left: 0;
  width: 100%;
  height: 20px;
  background: radial-gradient(ellipse at center, 
    rgba(0,0,0,0.5) 0%, 
    rgba(0,0,0,0) 70%);
  transform: rotateX(90deg);
  opacity: 0.5;
}

这些代码组合可以创建一个自动旋转的3D立体相册，悬停时会暂停旋转并突出显示当前照片。通过调整perspective值和translateZ值可以改变3D效果的强度，添加媒体查询确保在不同设备上都有良好显示效果。