如何在CSS旋转木马上移动到下一张/上一张幻灯片？

<div class="carousel">
  <div class="slide">幻灯片1</div>
  <div class="slide">幻灯片2</div>
  <div class="slide">幻灯片3</div>
</div>
<button id="prevBtn">上一张</button>
<button id="nextBtn">下一张</button>

.carousel {
  width: 300px;
  height: 200px;
  overflow: hidden;
  perspective: 1000px; /* 设置透视视角，用于实现3D效果 */
}

.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d; /* 设置3D变换 */
  transition: transform 0.5s; /* 添加过渡效果 */
}

#prevBtn, #nextBtn {
  margin-top: 10px;
}

var carousel = document.querySelector('.carousel');
var slides = document.querySelectorAll('.slide');
var prevBtn = document.getElementById('prevBtn');
var nextBtn = document.getElementById('nextBtn');
var currentIndex = 0;

prevBtn.addEventListener('click', function() {
  currentIndex = (currentIndex - 1 + slides.length) % slides.length;
  carousel.style.transform = 'rotateY(' + (currentIndex * -120) + 'deg)';
});

nextBtn.addEventListener('click', function() {
  currentIndex = (currentIndex + 1) % slides.length;
  carousel.style.transform = 'rotateY(' + (currentIndex * -120) + 'deg)';
});