js 3d手势切换banner

<div class="banner">
  <div class="slide" style="--index: 0;">Slide 1</div>
  <div class="slide" style="--index: 1;">Slide 2</div>
  <div class="slide" style="--index: 2;">Slide 3</div>
</div>

.banner {
  position: relative;
  width: 100%;
  height: 300px;
  perspective: 1000px;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.5s;
}

.slide:nth-child(1) { background-color: red; }
.slide:nth-child(2) { background-color: green; }
.slide:nth-child(3) { background-color: blue; }

let currentIndex = 0;
const banner = document.querySelector('.banner');
const slides = document.querySelectorAll('.slide');

banner.addEventListener('wheel', (e) => {
  e.preventDefault();
  if (e.deltaY > 0) {
    currentIndex = (currentIndex + 1) % slides.length;
  } else {
    currentIndex = (currentIndex - 1 + slides.length) % slides.length;
  }
  
  updateSlides();
});

function updateSlides() {
  slides.forEach((slide, index) => {
    const angle = (currentIndex - index) * 90;
    slide.style.transform = `rotateY(${angle}deg) translateZ(300px)`;
  });
}