jquery 旋转木马3d文字效果

<div class="carousel">
  <div class="item">文字1</div>
  <div class="item">文字2</div>
  <div class="item">文字3</div>
</div>

.carousel {
  position: relative;
  width: 100%;
  height: 200px;
  perspective: 1000px;
}

.item {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 200px;
  text-align: center;
  font-size: 24px;
  color: #fff;
  transition: transform 1s;
}

.item:nth-child(1) { background-color: red; }
.item:nth-child(2) { background-color: green; }
.item:nth-child(3) { background-color: blue; }

$(document).ready(function() {
  let angle = 0;
  setInterval(function() {
    angle += 120; // 每次旋转120度
    $('.item').each(function(index) {
      $(this).css('transform', 'rotateY(' + (angle + index * 120) + 'deg) translateZ(300px)');
    });
  }, 3000); // 每3秒切换一次
});