如何将地图放在背景中，并从底部的菜单中制作旋转木马？

<div id="carousel-container">
  <div id="map"></div>
  <ul id="menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</div>

#map {
  background-image: url('map.jpg');
  background-size: cover;
  width: 100%;
  height: 100%;
}

#menu {
  position: absolute;
  bottom: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0;
}

#menu li {
  margin: 0 10px;
  padding: 5px 10px;
  background-color: #ccc;
}

var menuItems = document.querySelectorAll('#menu li');
var carouselContainer = document.getElementById('carousel-container');
var rotationAngle = 0;

menuItems.forEach(function(item, index) {
  item.addEventListener('click', function() {
    rotationAngle = index * -90;
    carouselContainer.style.transform = 'rotateY(' + rotationAngle + 'deg)';
  });
});