我如何在我的旋转木马上产生这种悬停效果？

<div class="carousel">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <!-- 更多项目 -->
</div>

.carousel {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 使容器占满整个视口高度 */
}

.item {
  padding: 20px;
  margin: 10px;
  background-color: #f0f0f0;
  border-radius: 5px;
  transition: transform 0.3s ease; /* 添加平滑过渡效果 */
}

.item:hover {
  transform: scale(1.1); /* 放大元素 */
  z-index: 1; /* 确保悬停的元素在最前面 */
}

document.querySelectorAll('.item').forEach(item => {
  item.addEventListener('mouseenter', () => {
    // 悬停时的操作
    item.style.backgroundColor = '#ffcc00'; // 改变背景颜色
  });

  item.addEventListener('mouseleave', () => {
    // 离开时的操作
    item.style.backgroundColor = '#f0f0f0'; // 恢复背景颜色
  });
});