旋转相册制作css文件
旋转相册制作CSS文件
旋转相册通常通过CSS的transform和animation属性实现，结合HTML结构创建3D视觉效果。以下是实现旋转相册的核心CSS代码示例：
基础HTML结构
<div class="photo-album">
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<!-- 更多照片... -->
</div>关键CSS代码
.photo-album {
width: 300px;
height: 200px;
position: relative;
margin: 100px auto;
transform-style: preserve-3d;
animation: rotate 10s infinite linear;
}
.photo {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
opacity: 0.9;
border: 2px solid white;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
/* 为每个照片设置不同的旋转角度 */
.photo:nth-child(1) { transform: rotateY(0deg) translateZ(200px); }
.photo:nth-child(2) { transform: rotateY(60deg) translateZ(200px); }
.photo:nth-child(3) { transform: rotateY(120deg) translateZ(200px); }
.photo:nth-child(4) { transform: rotateY(180deg) translateZ(200px); }
.photo:nth-child(5) { transform: rotateY(240deg) translateZ(200px); }
.photo:nth-child(6) { transform: rotateY(300deg) translateZ(200px); }
@keyframes rotate {
from { transform: rotateY(0deg); }
to { transform: rotateY(360deg); }
}自定义调整建议
- 尺寸调整：修改
.photo-album的width和height改变相册大小，调整translateZ值控制照片间距。 - 速度控制：修改
animation中的10s调整旋转速度（数值越小越快）。 - 照片数量：每增加一张照片需补充对应的
nth-child规则，角度按360°均分（如5张照片时每张间隔72°）。
增强效果
添加悬停暂停效果：
.photo-album:hover {
animation-play-state: paused;
}添加背景渐变：
body {
background: radial-gradient(circle, #f5f7fa, #c3cfe2);
}完整实现时需将.photo的background替换为实际图片URL，或通过HTML的<img>标签嵌入图片。
