js图片3d旋转木马滚动

<div class="carousel">
  <div class="carousel-inner">
    <div class="carousel-item"><img src="image1.jpg" alt="Image 1"></div>
    <div class="carousel-item"><img src="image2.jpg" alt="Image 2"></div>
    <div class="carousel-item"><img src="image3.jpg" alt="Image 3"></div>
    <!-- 更多图片 -->
  </div>
</div>

.carousel {
  perspective: 1000px;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.carousel-inner {
  display: flex;
  transform-style: preserve-3d;
  transition: transform 0.5s;
}

.carousel-item {
  width: 200px;
  height: 200px;
  margin: 0 10px;
  position: relative;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

const carouselInner = document.querySelector('.carousel-inner');
let currentIndex = 0;

function rotateCarousel() {
  const angle = currentIndex * -30; // 每张图片旋转30度
  carouselInner.style.transform = `translateZ(-250px) rotateY(${angle}deg)`;
  currentIndex = (currentIndex + 1) % document.querySelectorAll('.carousel-item').length;
}

setInterval(rotateCarousel, 3000); // 每3秒旋转一次

window.onload = function() {
  setInterval(rotateCarousel, 3000);
};

.carousel-inner {
  transform: translate3d(0, 0, 0);
}