回転ギャラリーカルーセル(3D)

<div class="d08-05-08-wrap">
          <div class="d08-05-08-stage">
            <div class="d08-05-08-carousel" id="d08-05-08-carousel">
              <div class="d08-05-08-item" style="background:#f43f5e;transform:rotateY(0deg) translateZ(150px)">1</div>
              <div class="d08-05-08-item" style="background:#f59e0b;transform:rotateY(60deg) translateZ(150px)">2</div>
              <div class="d08-05-08-item" style="background:#10b981;transform:rotateY(120deg) translateZ(150px)">3</div>
              <div class="d08-05-08-item" style="background:#3b82f6;transform:rotateY(180deg) translateZ(150px)">4</div>
              <div class="d08-05-08-item" style="background:#8b5cf6;transform:rotateY(240deg) translateZ(150px)">5</div>
              <div class="d08-05-08-item" style="background:#ec4899;transform:rotateY(300deg) translateZ(150px)">6</div>
            </div>
          </div>
          <div class="d08-05-08-nav">
            <button type="button" class="d08-05-08-prev" aria-label="前へ">←</button>
            <button type="button" class="d08-05-08-next" aria-label="次へ">→</button>
          </div>
        </div>

.d08-05-08-wrap{display:flex;flex-direction:column;align-items:center;gap:16px}
        .d08-05-08-stage{perspective:900px;width:100px;height:120px}
        .d08-05-08-carousel{position:relative;width:100px;height:120px;margin:0 auto;transform-style:preserve-3d;transition:transform .6s ease}
        .d08-05-08-item{position:absolute;inset:0;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:22px;opacity:.92}
        .d08-05-08-nav{display:flex;gap:10px}
        .d08-05-08-nav button{width:30px;height:30px;border-radius:50%;border:1px solid #e2e8f0;background:#fff;color:#334155;cursor:pointer;font-size:13px}

(function(){
        var root=document.getElementById('item-08-05-08');if(!root)return;
        var carousel=root.querySelector('#d08-05-08-carousel');
        var angle=0;
        root.querySelector('.d08-05-08-prev').addEventListener('click',function(){
          angle+=60;
          carousel.style.transform='rotateY('+angle+'deg)';
        });
        root.querySelector('.d08-05-08-next').addEventListener('click',function(){
          angle-=60;
          carousel.style.transform='rotateY('+angle+'deg)';
        });
      })();