js实现摩天轮

<div class="carousel">
  <div class="carousel-item">Item 1</div>
  <div class="carousel-item">Item 2</div>
  <div class="carousel-item">Item 3</div>
  <div class="carousel-item">Item 4</div>
</div>

.carousel {
  position: relative;
  width: 300px;
  height: 200px;
  margin: 0 auto;
  overflow: hidden;
}

.carousel-item {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 200px;
  text-align: center;
  font-size: 24px;
  color: white;
  background-color: #3498db;
  border-radius: 50%;
  transition: transform 0.5s ease-in-out;
}

const carousel = document.querySelector('.carousel');
const items = document.querySelectorAll('.carousel-item');
let currentIndex = 0;

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

setInterval(rotateCarousel, 2000);