3d旋转木马js

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

.carousel {
  position: relative;
  width: 300px;
  height: 200px;
  perspective: 1000px;
}

.item {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ccc;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  transition: transform 0.5s;
}

const carousel = document.querySelector('.carousel');
const items = document.querySelectorAll('.item');

let angle = 0;

function rotateCarousel() {
  angle += 1;
  items.forEach((item, index) => {
    const itemAngle = angle + (index * 360 / items.length);
    item.style.transform = `rotateY(${itemAngle}deg) translateZ(300px)`;
  });
  requestAnimationFrame(rotateCarousel);
}

rotateCarousel();