如何创建具有更宽中心元素的旋转木马？

<div class="carousel">
  <div class="center-item">中心元素</div>
  <div class="item">旋转项1</div>
  <div class="item">旋转项2</div>
  <div class="item">旋转项3</div>
  <!-- 添加更多旋转项 -->
</div>

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

.item {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background-color: #ccc;
  transform-style: preserve-3d; /* 设置元素保持 3D 效果 */
  transition: transform 0.5s; /* 设置过渡效果 */
}

.center-item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 将中心元素居中 */
  width: 300px;
  height: 300px;
  background-color: #f00;
  transform-style: preserve-3d;
  transition: transform 0.5s;
}

.carousel:hover .item {
  transform: rotateY(60deg); /* 设置旋转角度 */
}

.carousel:hover .center-item {
  transform: rotateY(-60deg);
}

const carousel = document.querySelector('.carousel');
const items = carousel.querySelectorAll('.item');

items.forEach(item => {
  item.addEventListener('click', () => {
    carousel.insertBefore(item, carousel.firstChild); // 将点击的旋转项移动到第一个位置
  });
});