.carousel {
    margin: auto;
    position: relative;
    width: 1200px;
    height: 340px;
    top: 0;
    perspective: 5000px;
    perspective-origin: 50% 50%;
  }

  .carousel-container {
    position: absolute;
    left: 50%;
    top: 30%;
    width: 0;
    height: 0;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) rotateX(-10deg);
  }

  .carousel-item {
    position: absolute;
    left: -130px; /* 364/2 */
    top: -90px;  /* 242/2 */
    width: 250px;
    height: 160px;
    background: #eee;
    border-radius: 8px;
    transform-origin: center;
    backface-visibility: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    overflow: hidden;
  }

  .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
  }

  .carousel-item:nth-child(1) { transform: rotateY(0deg) translateZ(500px); }
  .carousel-item:nth-child(2) { transform: rotateY(30deg) translateZ(500px); }
  .carousel-item:nth-child(3) { transform: rotateY(60deg) translateZ(500px); }
  .carousel-item:nth-child(4) { transform: rotateY(90deg) translateZ(500px); }
  .carousel-item:nth-child(5) { transform: rotateY(120deg) translateZ(500px); }
  .carousel-item:nth-child(6) { transform: rotateY(150deg) translateZ(500px); }
  .carousel-item:nth-child(7) { transform: rotateY(180deg) translateZ(500px); }
  .carousel-item:nth-child(8) { transform: rotateY(210deg) translateZ(500px); }
  .carousel-item:nth-child(9) { transform: rotateY(240deg) translateZ(500px); }
  .carousel-item:nth-child(10) { transform: rotateY(270deg) translateZ(500px); }
  .carousel-item:nth-child(11) { transform: rotateY(300deg) translateZ(500px); }
  .carousel-item:nth-child(12) { transform: rotateY(330deg) translateZ(500px); }

  /* 为36个项目生成动画 */
  .carousel-item:nth-child(1) { animation: rotate-1 36s linear infinite; }
  .carousel-item:nth-child(2) { animation: rotate-2 36s linear infinite; }
  .carousel-item:nth-child(3) { animation: rotate-3 36s linear infinite; }
  .carousel-item:nth-child(4) { animation: rotate-4 36s linear infinite; }
  .carousel-item:nth-child(5) { animation: rotate-5 36s linear infinite; }
  .carousel-item:nth-child(6) { animation: rotate-6 36s linear infinite; }
  .carousel-item:nth-child(7) { animation: rotate-7 36s linear infinite; }
  .carousel-item:nth-child(8) { animation: rotate-8 36s linear infinite; }
  .carousel-item:nth-child(9) { animation: rotate-9 36s linear infinite; }
  .carousel-item:nth-child(10) { animation: rotate-10 36s linear infinite; }
  .carousel-item:nth-child(11) { animation: rotate-11 36s linear infinite; }
  .carousel-item:nth-child(12) { animation: rotate-12 36s linear infinite; }
  /* .carousel-item:nth-child(13) { animation: rotate-13 108s linear infinite; }
  .carousel-item:nth-child(14) { animation: rotate-14 108s linear infinite; }
  .carousel-item:nth-child(15) { animation: rotate-15 108s linear infinite; }
  .carousel-item:nth-child(16) { animation: rotate-16 108s linear infinite; }
  .carousel-item:nth-child(17) { animation: rotate-17 108s linear infinite; }
  .carousel-item:nth-child(18) { animation: rotate-18 108s linear infinite; }
  .carousel-item:nth-child(19) { animation: rotate-19 108s linear infinite; }
  .carousel-item:nth-child(20) { animation: rotate-20 108s linear infinite; }
  .carousel-item:nth-child(21) { animation: rotate-21 108s linear infinite; }
  .carousel-item:nth-child(22) { animation: rotate-22 108s linear infinite; }
  .carousel-item:nth-child(23) { animation: rotate-23 108s linear infinite; }
  .carousel-item:nth-child(24) { animation: rotate-24 108s linear infinite; }
  .carousel-item:nth-child(25) { animation: rotate-25 108s linear infinite; }
  .carousel-item:nth-child(26) { animation: rotate-26 108s linear infinite; }
  .carousel-item:nth-child(27) { animation: rotate-27 108s linear infinite; }
  .carousel-item:nth-child(28) { animation: rotate-28 108s linear infinite; }
  .carousel-item:nth-child(29) { animation: rotate-29 108s linear infinite; }
  .carousel-item:nth-child(30) { animation: rotate-30 108s linear infinite; }
  .carousel-item:nth-child(31) { animation: rotate-31 108s linear infinite; }
  .carousel-item:nth-child(32) { animation: rotate-32 108s linear infinite; }
  .carousel-item:nth-child(33) { animation: rotate-33 108s linear infinite; }
  .carousel-item:nth-child(34) { animation: rotate-34 108s linear infinite; }
  .carousel-item:nth-child(35) { animation: rotate-35 108s linear infinite; }
  .carousel-item:nth-child(36) { animation: rotate-36 108s linear infinite; } */

  /* 生成36个关键帧动画，每个间隔30度 */
  @keyframes rotate-1 { from { transform: rotateY(0deg) translateZ(500px); } to { transform: rotateY(360deg) translateZ(500px); } }
  @keyframes rotate-2 { from { transform: rotateY(30deg) translateZ(500px); } to { transform: rotateY(390deg) translateZ(500px); } }
  @keyframes rotate-3 { from { transform: rotateY(60deg) translateZ(500px); } to { transform: rotateY(420deg) translateZ(500px); } }
  @keyframes rotate-4 { from { transform: rotateY(90deg) translateZ(500px); } to { transform: rotateY(450deg) translateZ(500px); } }
  @keyframes rotate-5 { from { transform: rotateY(120deg) translateZ(500px); } to { transform: rotateY(480deg) translateZ(500px); } }
  @keyframes rotate-6 { from { transform: rotateY(150deg) translateZ(500px); } to { transform: rotateY(510deg) translateZ(500px); } }
  @keyframes rotate-7 { from { transform: rotateY(180deg) translateZ(500px); } to { transform: rotateY(540deg) translateZ(500px); } }
  @keyframes rotate-8 { from { transform: rotateY(210deg) translateZ(500px); } to { transform: rotateY(570deg) translateZ(500px); } }
  @keyframes rotate-9 { from { transform: rotateY(240deg) translateZ(500px); } to { transform: rotateY(600deg) translateZ(500px); } }
  @keyframes rotate-10 { from { transform: rotateY(270deg) translateZ(500px); } to { transform: rotateY(630deg) translateZ(500px); } }
  @keyframes rotate-11 { from { transform: rotateY(300deg) translateZ(500px); } to { transform: rotateY(660deg) translateZ(500px); } }
  @keyframes rotate-12 { from { transform: rotateY(330deg) translateZ(500px); } to { transform: rotateY(690deg) translateZ(500px); } }
  /* @keyframes rotate-13 { from { transform: rotateY(360deg) translateZ(500px); } to { transform: rotateY(1440deg) translateZ(500px); } }
  @keyframes rotate-14 { from { transform: rotateY(390deg) translateZ(500px); } to { transform: rotateY(1470deg) translateZ(500px); } }
  @keyframes rotate-15 { from { transform: rotateY(420deg) translateZ(500px); } to { transform: rotateY(1500deg) translateZ(500px); } }
  @keyframes rotate-16 { from { transform: rotateY(450deg) translateZ(500px); } to { transform: rotateY(1530deg) translateZ(500px); } }
  @keyframes rotate-17 { from { transform: rotateY(480deg) translateZ(500px); } to { transform: rotateY(1560deg) translateZ(500px); } }
  @keyframes rotate-18 { from { transform: rotateY(510deg) translateZ(500px); } to { transform: rotateY(1590deg) translateZ(500px); } }
  @keyframes rotate-19 { from { transform: rotateY(540deg) translateZ(500px); } to { transform: rotateY(1620deg) translateZ(500px); } }
  @keyframes rotate-20 { from { transform: rotateY(570deg) translateZ(500px); } to { transform: rotateY(1650deg) translateZ(500px); } }
  @keyframes rotate-21 { from { transform: rotateY(600deg) translateZ(500px); } to { transform: rotateY(1680deg) translateZ(500px); } }
  @keyframes rotate-22 { from { transform: rotateY(630deg) translateZ(500px); } to { transform: rotateY(1710deg) translateZ(500px); } }
  @keyframes rotate-23 { from { transform: rotateY(660deg) translateZ(500px); } to { transform: rotateY(1740deg) translateZ(500px); } }
  @keyframes rotate-24 { from { transform: rotateY(690deg) translateZ(500px); } to { transform: rotateY(1770deg) translateZ(500px); } }
  @keyframes rotate-25 { from { transform: rotateY(720deg) translateZ(500px); } to { transform: rotateY(1800deg) translateZ(500px); } }
  @keyframes rotate-26 { from { transform: rotateY(750deg) translateZ(500px); } to { transform: rotateY(1830deg) translateZ(500px); } }
  @keyframes rotate-27 { from { transform: rotateY(780deg) translateZ(500px); } to { transform: rotateY(1860deg) translateZ(500px); } }
  @keyframes rotate-28 { from { transform: rotateY(810deg) translateZ(500px); } to { transform: rotateY(1890deg) translateZ(500px); } }
  @keyframes rotate-29 { from { transform: rotateY(840deg) translateZ(500px); } to { transform: rotateY(1920deg) translateZ(500px); } }
  @keyframes rotate-30 { from { transform: rotateY(870deg) translateZ(500px); } to { transform: rotateY(1950deg) translateZ(500px); } }
  @keyframes rotate-31 { from { transform: rotateY(900deg) translateZ(500px); } to { transform: rotateY(1980deg) translateZ(500px); } }
  @keyframes rotate-32 { from { transform: rotateY(930deg) translateZ(500px); } to { transform: rotateY(2010deg) translateZ(500px); } }
  @keyframes rotate-33 { from { transform: rotateY(960deg) translateZ(500px); } to { transform: rotateY(2040deg) translateZ(500px); } }
  @keyframes rotate-34 { from { transform: rotateY(990deg) translateZ(500px); } to { transform: rotateY(2070deg) translateZ(500px); } }
  @keyframes rotate-35 { from { transform: rotateY(1020deg) translateZ(500px); } to { transform: rotateY(2100deg) translateZ(500px); } }
  @keyframes rotate-36 { from { transform: rotateY(1050deg) translateZ(500px); } to { transform: rotateY(2130deg) translateZ(500px); } } */

  .carousel:hover .carousel-item{animation-play-state: paused;}