html加css 制作3D 旋转相册

HTML、CSS和JavaScript结合可以制作出3D旋转相册的效果，通常通过CSS3的transform属性以及transition或animation来实现动画效果。以下是一个简单的步骤概述：

1. **HTML结构**：
创建一个包含图片的容器，每个图片元素作为幻灯片，例如：

   <div class="carousel-container">
     <img src="image1.jpg" alt="Slide 1">
     <img src="image2.jpg" alt="Slide 2">
     <!-- 更多图片 -->
   </div>

2. **CSS样式**：
- 使用`position: relative; perspective: 1000px;`设置透视，让旋转生效。
- 为`.carousel-item`添加`position: absolute; transform-style: preserve-3d; transition: transform 0.5s ease-in-out;`来创建3D空间并添加过渡效果。
- 通过`transform: rotateY(0deg);`初始化图片的旋转角度。

   .carousel-container {
     position: relative;
     perspective: 1000px;
   }
   
   .carousel-item {
     position: absolute;
     width: 100%;
     height: 100%;
     transform-origin: center center;
     transition: transform 0.5s ease-in-out;
   }

3. **JavaScript (可选)**：
可能需要使用JavaScript来控制轮播和交互，如触屏滑动切换角度。可以利用`event.preventDefault()`防止默认的滚动行为，并监听touchstart、touchmove和touchend事件来更新旋转角度。

4. **触发旋转**：
你可以编写JS代码，当鼠标悬停或者用户触摸屏幕时改变图片的旋转角度，比如从0到90度，然后返回原位，形成循环旋转效果。

const carouselItems = document.querySelectorAll('.carousel-item');
let currentAngle = 0;

carouselItems.forEach((item, index) => {
  item.addEventListener('touchstart', () => {
    startRotation(index);
  });
});

function startRotation(index) {
  // 更新旋转角度，这里仅示例
  currentAngle += 90;
  if (currentAngle > 360) currentAngle -= 360;
  carouselItems[index].style.transform = `rotateY(${currentAngle}deg)`;
}

// 添加其他交互逻辑...