当前位置：首页 > CSS

旋转相册制作css文件

2026-01-27 21:51:01CSS

旋转相册制作css文件

旋转相册制作CSS文件

制作旋转相册主要依赖CSS的3D变换和动画功能。以下是一个完整的旋转相册CSS实现方案，包含关键代码和注释。

基础HTML结构

<div class="photo-album">
  <div class="album-container">
    <img src="image1.jpg" alt="Photo 1">
    <img src="image2.jpg" alt="Photo 2">
    <img src="image3.jpg" alt="Photo 3">
    <img src="image4.jpg" alt="Photo 4">
    <img src="image5.jpg" alt="Photo 5">
    <img src="image6.jpg" alt="Photo 6">
  </div>
</div>

核心CSS样式

.photo-album {
  perspective: 1000px;
  width: 300px;
  height: 300px;
  margin: 50px auto;
}

.album-container {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: rotate 20s infinite linear;
}

.album-container img {
  position: absolute;
  width: 200px;
  height: 150px;
  border: 5px solid white;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  opacity: 0.9;
  transition: all 0.5s ease;
}

/* 为每张图片设置不同的旋转角度 */
.album-container img:nth-child(1) {
  transform: rotateY(0deg) translateZ(200px);
}
.album-container img:nth-child(2) {
  transform: rotateY(60deg) translateZ(200px);
}
.album-container img:nth-child(3) {
  transform: rotateY(120deg) translateZ(200px);
}
.album-container img:nth-child(4) {
  transform: rotateY(180deg) translateZ(200px);
}
.album-container img:nth-child(5) {
  transform: rotateY(240deg) translateZ(200px);
}
.album-container img:nth-child(6) {
  transform: rotateY(300deg) translateZ(200px);
}

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

/* 悬停效果 */
.album-container:hover {
  animation-play-state: paused;
}

.album-container:hover img {
  opacity: 1;
  transform: scale(1.05);
}

响应式调整

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

  .album-container img {
    width: 150px;
    height: 100px;
    transform: translateZ(150px);
  }
}

高级效果增强

/* 添加景深效果 */
.photo-album {
  filter: drop-shadow(0 0 20px rgba(0,0,0,0.3));
}

/* 图片加载过渡 */
.album-container img {
  opacity: 0;
  animation: fadeIn 1s forwards;
}

@keyframes fadeIn {
  to { opacity: 0.9; }
}

/* 点击放大效果 */
.album-container img:active {
  transform: scale(2) translateZ(300px);
  z-index: 10;
  opacity: 1;
}

这个CSS方案创建了一个3D旋转相册，具有以下特点：