幻灯片立体切换效果js_

<div class="slider">
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
</div>
<button onclick="prevSlide()">Previous</button>
<button onclick="nextSlide()">Next</button>

.slider {
  position: relative;
  width: 80%;
  height: 300px;
  margin: auto;
  perspective: 1000px;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 300px;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.slide:nth-child(1) { transform: rotateY(0deg); }
.slide:nth-child(2) { transform: rotateY(-180deg); }
.slide:nth-child(3) { transform: rotateY(-360deg); }

let currentSlide = 0;
const slides = document.querySelectorAll('.slide');

function showSlide(index) {
  slides.forEach((slide, i) => {
    slide.style.transform = `rotateY(${(i - index) * 180}deg)`;
  });
}

function nextSlide() {
  currentSlide = (currentSlide + 1) % slides.length;
  showSlide(currentSlide);
}

function prevSlide() {
  currentSlide = (currentSlide - 1 + slides.length) % slides.length;
  showSlide(currentSlide);
}