如何创建侧面有文本的旋转木马(不是全尺寸)-如图所示

<div class="carousel">
  <div class="carousel-inner">
    <div class="carousel-item">
      <div class="text-container">
        <h2>文本1</h2>
        <p>这是文本1的描述</p>
      </div>
    </div>
    <div class="carousel-item">
      <div class="text-container">
        <h2>文本2</h2>
        <p>这是文本2的描述</p>
      </div>
    </div>
    <div class="carousel-item">
      <div class="text-container">
        <h2>文本3</h2>
        <p>这是文本3的描述</p>
      </div>
    </div>
  </div>
</div>

.carousel {
  width: 300px;
  height: 200px;
  perspective: 1000px;
}

.carousel-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: rotate-carousel 10s infinite linear;
}

.carousel-item {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
}

.text-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

@keyframes rotate-carousel {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(-360deg);
  }
}

const carouselItems = document.querySelectorAll('.carousel-item');

carouselItems.forEach((item, index) => {
  item.style.transform = `rotateY(${index * (360 / carouselItems.length)}deg) translateZ(200px)`;
});