3D相册旋转木马效果实现

旋转木马效果通过CSS3的3D变换和镜头控制实现立体环绕感，结合响应式设计适配不同设备。以下是关键实现步骤和代码示例。

---

核心结构

HTML部分需包含一个3D容器和多个相册项，结构如下：

<div class="carousel">
  <div class="album-item">Item 1</div>
  <div class="album-item">Item 2</div>
  <!-- 更多项... -->
</div>

---

CSS3 3D变换

通过transform-style和透视距离创建3D空间：

.carousel {
  perspective: 1000px; /* 镜头距离 */
  transform-style: preserve-3d; /* 保持子元素3D状态 */
}
.album-item {
  position: absolute;
  width: 200px;
  height: 300px;
  transition: transform 1s ease-in-out;
}

---

旋转木马布局

使用rotateY控制项的水平环绕分布，假设共8项：

.album-item:nth-child(1) { transform: rotateY(0deg) translateZ(300px); }
.album-item:nth-child(2) { transform: rotateY(45deg) translateZ(300px); }
/* 其他项角度递增45deg */

公式计算项的位置： $angle = 360deg / n$ 其中n为相册项总数。

---

镜头控制

通过旋转父容器模拟镜头移动：

.carousel {
  transform: rotateY(var(--rotate-y, 0deg)); /* 通过JS动态控制 */
}

JavaScript监听鼠标或触摸事件更新--rotate-y变量：

document.addEventListener('mousemove', (e) => {
  const rotateY = e.clientX / window.innerWidth * 180 - 90;
  document.querySelector('.carousel').style.setProperty('--rotate-y', `${rotateY}deg`);
});

---

响应式适配

使用媒体查询和视窗单位调整尺寸和透视距离：

@media (max-width: 768px) {
  .carousel { perspective: 500px; }
  .album-item { 
    width: 120px; 
    height: 180px;
    transform: rotateY(var(--item-angle)) translateZ(150px); 
  }
}

---

动态交互增强

添加悬停放大效果提升用户体验：

.album-item:hover {
  transform: rotateY(var(--item-angle)) translateZ(300px) scale(1.2);
  z-index: 10;
}

通过结合CSS变量和JavaScript，可实现更复杂的动态效果如自动旋转或点击聚焦。关键点在于保持3D空间的一致性和性能优化（如使用will-change属性）。