使用 rotateY 和 perspective 创建立体旋转相册，多张照片围成一圈，可以旋转查看每一张
点击缩略图或使用按钮切换照片，体验3D旋转相册效果
💡 提示：点击下方缩略图快速跳转到对应照片，或使用上一张/下一张按钮浏览
创建3D相册的容器结构：
<!-- 3D相册舞台 -->
<div class="carousel-stage">
<!-- 相册容器（可旋转） -->
<div class="carousel-3d">
<!-- 照片项（通过 JavaScript 动态生成） -->
<div class="carousel-item">
<img src="..." alt="照片">
<div class="carousel-caption">照片标题</div>
</div>
</div>
</div>在舞台上设置 perspective，在相册容器上设置 transform-style：
/* 3D相册舞台 - 提供透视 */
.carousel-stage {
width: 600px;
height: 400px;
perspective: 1200px;
}
/* 相册容器 - 保持 3D 空间 */
.carousel-3d {
width: 300px;
height: 300px;
transform-style: preserve-3d;
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}根据照片数量，计算每张照片的旋转角度和位置：
const totalImages = 8;
const angleStep = 360 / totalImages; // 每张照片间隔角度
const radius = 400; // 相册半径
// 为每张照片设置位置
images.forEach((img, index) => {
const angle = angleStep * index;
const item = document.createElement('div');
item.className = 'carousel-item';
// 旋转并向外推
item.style.transform = `rotateY(${angle}deg) translateZ(${radius}px)`;
});通过旋转整个相册容器来切换照片：
let currentIndex = 0;
function rotateTo(index) {
currentIndex = index;
const angle = -angleStep * index; // 负数表示反向旋转
carousel.style.transform = `rotateY(${angle}deg)`;
}
// 下一张
function next() {
currentIndex = (currentIndex + 1) % totalImages;
rotateTo(currentIndex);
}
// 上一张
function prev() {
currentIndex = (currentIndex - 1 + totalImages) % totalImages;
rotateTo(currentIndex);
}创建缩略图，点击可快速跳转到对应照片：
// 创建缩略图
images.forEach((img, index) => {
const thumb = document.createElement('div');
thumb.className = 'thumbnail';
thumb.innerHTML = `<img src="${img.url}" alt="${img.title}">`;
// 点击跳转
thumb.addEventListener('click', () => {
rotateTo(index);
});
thumbnailNav.appendChild(thumb);
});