当前位置：首页 > CSS

旋转相册制作css文件

2026-01-08 19:41:04CSS

旋转相册制作CSS文件

旋转相册通常通过CSS动画和3D变换实现，以下是一个完整的CSS文件示例，用于创建一个3D旋转相册效果。

基础HTML结构

在CSS文件之前，需确保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 {
  width: 300px;
  height: 200px;
  position: relative;
  margin: 100px auto;
  perspective: 1000px; /* 3D透视效果 */
}

/* 单个照片样式 */
.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);
  transform-origin: center center -150px; /* 设置旋转中心 */
  transition: transform 1s ease;
}

/* 照片初始位置（环形排列） */
.photo:nth-child(1) { transform: rotateY(0deg) translateZ(150px); }
.photo:nth-child(2) { transform: rotateY(90deg) translateZ(150px); }
.photo:nth-child(3) { transform: rotateY(180deg) translateZ(150px); }
.photo:nth-child(4) { transform: rotateY(270deg) translateZ(150px); }

/* 动画效果 */
@keyframes rotateAlbum {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

.photo-album {
  animation: rotateAlbum 20s infinite linear;
}

/* 悬停暂停动画 */
.photo-album:hover {
  animation-play-state: paused;
}

扩展功能

添加更多照片 若需增加照片数量，需调整旋转角度和Z轴位移：

/* 例如6张照片的情况 */
.photo:nth-child(1) { transform: rotateY(0deg) translateZ(150px); }
.photo:nth-child(2) { transform: rotateY(60deg) translateZ(150px); }
.photo:nth-child(3) { transform: rotateY(120deg) translateZ(150px); }
/* 以此类推... */

响应式调整 通过媒体查询适应不同屏幕尺寸：

@media (max-width: 600px) {
  .photo-album {
    width: 200px;
    height: 150px;
    perspective: 500px;
  }
  .photo {
    transform-origin: center center -100px;
  }
}