如何在使用鼠标移动效果时修复旋转木马中的背景图像重叠

<div class="carousel">
  <div class="item">
    <div class="content">
      <!-- 内容 -->
    </div>
  </div>
  <div class="item">
    <div class="content">
      <!-- 内容 -->
    </div>
  </div>
  <!-- 更多项目元素 -->
</div>

.carousel {
  position: relative;
  width: 100%;
  height: 400px;
  /* 其他样式设置 */
}

.item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 其他样式设置 */
}

.content {
  position: relative;
  width: 100%;
  height: 100%;
  /* 其他样式设置 */
}

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

carousel.addEventListener('mousemove', function(event) {
  var mouseX = event.clientX;
  var carouselRect = carousel.getBoundingClientRect();
  var carouselCenterX = carouselRect.left + carouselRect.width / 2;

  var rotationAngle = (mouseX - carouselCenterX) * 0.1;

  items.forEach(function(item) {
    item.style.transform = 'rotateY(' + rotationAngle + 'deg)';
  });
});