在移动视图中将元素合并为旋转木马？

<div class="carousel-container">
  <div class="carousel-item">Element 1</div>
  <div class="carousel-item">Element 2</div>
  <div class="carousel-item">Element 3</div>
  <div class="carousel-item">Element 4</div>
</div>

.carousel-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.carousel-item {
  width: 100px;
  height: 100px;
  margin: 0 10px;
  background-color: #ccc;
  transform: rotateY(0deg);
  transition: transform 0.5s;
}

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

const carouselContainer = document.querySelector('.carousel-container');
let rotation = 0;

carouselContainer.addEventListener('touchstart', handleTouchStart);
carouselContainer.addEventListener('touchmove', handleTouchMove);

function handleTouchStart(event) {
  const touch = event.touches[0];
  startX = touch.clientX;
}

function handleTouchMove(event) {
  if (!startX) return;
  
  const touch = event.touches[0];
  const moveX = touch.clientX - startX;
  
  rotation += moveX;
  carouselContainer.style.transform = `rotateY(${rotation}deg)`;
}