3Dカルーセル(カバーフロー)

<div class="cf">
          <div class="stage">
            <div class="cf-card" style="--c:#ff6b6b">1</div>
            <div class="cf-card" style="--c:#5b6ef5">2</div>
            <div class="cf-card" style="--c:#20c997">3</div>
            <div class="cf-card" style="--c:#f7971e">4</div>
            <div class="cf-card" style="--c:#845ef7">5</div>
          </div>
          <div class="ctrl">
            <button class="pv">‹</button><button class="nx">›</button>
          </div>
        </div>

.d11-02-10 .cf{width:280px}
        .d11-02-10 .stage{position:relative;height:170px;perspective:900px;transform-style:preserve-3d}
        .d11-02-10 .cf-card{position:absolute;top:50%;left:50%;width:100px;height:130px;margin:-65px 0 0 -50px;border-radius:14px;background:var(--c);color:#fff;display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:800;box-shadow:0 12px 30px rgba(0,0,0,.25);transition:transform .5s cubic-bezier(.4,.2,.2,1),opacity .5s;backface-visibility:hidden}
        .d11-02-10 .ctrl{display:flex;justify-content:center;gap:14px;margin-top:14px}
        .d11-02-10 .ctrl button{width:38px;height:38px;border:0;border-radius:50%;background:#26264a;color:#fff;font-size:20px;cursor:pointer;line-height:1}
        .d11-02-10 .ctrl button:active{transform:scale(.92)}

(function(){
        var r=document.querySelector('#item-11-02-10 .d11-02-10');
        var cards=r.querySelectorAll('.cf-card'),n=cards.length,cur=0;
        function render(){
          cards.forEach(function(c,i){
            var d=i-cur;
            if(d>n/2)d-=n;if(d<-n/2)d+=n;
            var abs=Math.abs(d);
            c.style.transform='translateX('+(d*70)+'px) translateZ('+(-abs*120)+'px) rotateY('+(-d*40)+'deg) scale('+(d===0?1.15:1)+')';
            c.style.opacity=abs>2?0:1-abs*0.15;
            c.style.zIndex=n-abs;
          });
        }
        r.querySelector('.nx').addEventListener('click',function(){cur=(cur+1)%n;render();});
        r.querySelector('.pv').addEventListener('click',function(){cur=(cur-1+n)%n;render();});
        render();
      })();