css立体相册制作
制作CSS立体相册
使用CSS3的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>CSS样式
.photo-album {
perspective: 1000px;
width: 300px;
height: 200px;
position: relative;
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;
transform-style: preserve-3d;
}
/* 设置每张照片的初始位置和旋转角度 */
.photo:nth-child(1) {
transform: rotateY(0deg) translateZ(200px);
background-color: #ff9999;
}
.photo:nth-child(2) {
transform: rotateY(90deg) translateZ(200px);
background-color: #99ff99;
}
.photo:nth-child(3) {
transform: rotateY(180deg) translateZ(200px);
background-color: #9999ff;
}
.photo:nth-child(4) {
transform: rotateY(270deg) translateZ(200px);
background-color: #ffff99;
}
/* 悬停效果 */
.photo-album:hover .photo {
transform: rotateY(0deg) translateZ(200px);
}添加交互效果
为了让相册可以手动旋转，可以添加JavaScript控制：
let currentAngle = 0;
const album = document.querySelector('.photo-album');
const photos = document.querySelectorAll('.photo');
function rotateAlbum(angle) {
currentAngle = angle;
photos.forEach((photo, index) => {
photo.style.transform = `rotateY(${currentAngle + index * 90}deg) translateZ(200px)`;
});
}
// 添加按钮控制
document.getElementById('prev').addEventListener('click', () => {
rotateAlbum(currentAngle - 90);
});
document.getElementById('next').addEventListener('click', () => {
rotateAlbum(currentAngle + 90);
});优化和扩展
添加背景图片代替纯色背景：
.photo:nth-child(1) {
background-image: url('photo1.jpg');
}调整动画缓动效果：
.photo {
transition: transform 1s cubic-bezier(0.25, 0.1, 0.25, 1);
}添加响应式设计：
@media (max-width: 600px) {
.photo-album {
perspective: 500px;
}
.photo {
transform: rotateY(var(--angle)) translateZ(100px);
}
}这个实现创建了一个基本的3D立体相册，照片排列在立方体的四个面上，悬停时会展开，也可以通过按钮控制旋转。可以根据需要添加更多照片或调整样式。
