3Dキューブ回転スクラブ

<div class="view08-16-01">
          <div class="stage08-16-01">
            <div class="cube08-16-01">
              <div class="face08-16-01 f08-16-01-front"></div>
              <div class="face08-16-01 f08-16-01-back"></div>
              <div class="face08-16-01 f08-16-01-right"></div>
              <div class="face08-16-01 f08-16-01-left"></div>
              <div class="face08-16-01 f08-16-01-top"></div>
              <div class="face08-16-01 f08-16-01-bottom"></div>
            </div>
          </div>
          <div class="scr08-16-01">
            <div class="sp08-16-01">
              <span class="hint08-16-01">↓ 枠内をスクロール<br>スクロール量がそのままキューブの回転角度になります</span>
            </div>
          </div>
        </div>

.d08-16-01{background:#0f172a;align-items:stretch;}
        .d08-16-01 .view08-16-01{
          position:relative;width:100%;height:212px;border-radius:12px;
          overflow:hidden;background:radial-gradient(circle at 50% 30%,#1e293b,#0f172a 75%);
        }
        .d08-16-01 .stage08-16-01{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;perspective:480px;}
        .d08-16-01 .cube08-16-01{position:relative;width:56px;height:56px;transform-style:preserve-3d;will-change:transform;}
        .d08-16-01 .face08-16-01{position:absolute;width:56px;height:56px;border:1px solid rgba(255,255,255,.25);opacity:.88;}
        .d08-16-01 .f08-16-01-front{transform:translateZ(28px);background:linear-gradient(135deg,#38bdf8,#6366f1);}
        .d08-16-01 .f08-16-01-back{transform:translateZ(-28px) rotateY(180deg);background:linear-gradient(135deg,#f472b6,#a855f7);}
        .d08-16-01 .f08-16-01-right{transform:rotateY(90deg) translateZ(28px);background:linear-gradient(135deg,#34d399,#0ea5e9);}
        .d08-16-01 .f08-16-01-left{transform:rotateY(-90deg) translateZ(28px);background:linear-gradient(135deg,#fbbf24,#f97316);}
        .d08-16-01 .f08-16-01-top{transform:rotateX(90deg) translateZ(28px);background:linear-gradient(135deg,#c084fc,#818cf8);}
        .d08-16-01 .f08-16-01-bottom{transform:rotateX(-90deg) translateZ(28px);background:linear-gradient(135deg,#94a3b8,#475569);}
        .d08-16-01 .scr08-16-01{position:absolute;inset:0;overflow-y:auto;}
        .d08-16-01 .sp08-16-01{height:900px;padding:16px 18px 0;}
        .d08-16-01 .hint08-16-01{display:inline-block;font-size:11.5px;line-height:1.7;color:#e0e7ff;background:rgba(15,23,42,.6);padding:8px 12px;border-radius:8px;}

(function(){
        var scr=document.querySelector('.d08-16-01 .scr08-16-01');
        if(!scr)return;
        var cube=document.querySelector('.d08-16-01 .cube08-16-01');
        function update(){
          var max=scr.scrollHeight-scr.clientHeight;
          var p=max>0?scr.scrollTop/max:0;
          cube.style.transform='rotateX('+(p*360)+'deg) rotateY('+(p*720)+'deg)';
        }
        scr.addEventListener('scroll',update,{passive:true});
        update();
      })();