旋转相册制作css文件

旋转相册制作CSS文件

以下是一个实现旋转相册效果的CSS代码示例，通过3D变换和动画实现图片环绕旋转效果。该代码需配合HTML结构使用。

基础HTML结构

<div class="photo-album">
  <div class="photo"></div>
  <div class="photo"></div>
  <div class="photo"></div>
  <!-- 更多图片 -->
</div>

核心CSS代码

.photo-album {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 50px auto;
  transform-style: preserve-3d;
  animation: rotate 20s infinite linear;
}

.photo {
  position: absolute;
  width: 200px;
  height: 150px;
  background-size: cover;
  opacity: 0.9;
  border: 2px solid white;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

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

图片位置计算

为每个.photo元素添加独立的transform属性，使图片均匀分布在3D空间。假设有8张图片：

.photo:nth-child(1) {
  transform: rotateY(0deg) translateZ(250px);
}
.photo:nth-child(2) {
  transform: rotateY(45deg) translateZ(250px);
}
.photo:nth-child(3) {
  transform: rotateY(90deg) translateZ(250px);
}
/* 继续添加剩余图片的变换 */

交互增强

添加悬停暂停效果：

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

.photo:hover {
  transform: scale(1.2) !important;
  opacity: 1;
  cursor: pointer;
}

完整实现要点

1. 容器需设置transform-style: preserve-3d保持3D空间
2. 每张图片通过rotateY和translateZ确定空间位置
3. 主动画控制整个容器的Y轴旋转
4. 图片数量越多，角度间隔越小（360deg/图片数）
5. 可通过JavaScript动态生成位置样式以适应不同数量图片

响应式调整

添加媒体查询适应不同屏幕：

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