3D回転キューブ

<div class="d08-05-01-wrap">
          <div class="d08-05-01-stage">
            <div class="d08-05-01-cube">
              <div class="d08-05-01-face d08-05-01-front">正面</div>
              <div class="d08-05-01-face d08-05-01-back">背面</div>
              <div class="d08-05-01-face d08-05-01-right">右</div>
              <div class="d08-05-01-face d08-05-01-left">左</div>
              <div class="d08-05-01-face d08-05-01-top">上</div>
              <div class="d08-05-01-face d08-05-01-bottom">下</div>
            </div>
          </div>
          <p class="d08-05-01-hint">ドラッグして回転</p>
        </div>

.d08-05-01-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
        .d08-05-01-stage{perspective:700px;width:110px;height:110px;cursor:grab}
        .d08-05-01-stage:active{cursor:grabbing}
        .d08-05-01-cube{position:relative;width:110px;height:110px;transform-style:preserve-3d;transition:transform .05s linear}
        .d08-05-01-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;border-radius:6px;opacity:.94}
        .d08-05-01-front{background:#6366f1;transform:translateZ(55px)}
        .d08-05-01-back{background:#8b5cf6;transform:rotateY(180deg) translateZ(55px)}
        .d08-05-01-right{background:#ec4899;transform:rotateY(90deg) translateZ(55px)}
        .d08-05-01-left{background:#f59e0b;transform:rotateY(-90deg) translateZ(55px)}
        .d08-05-01-top{background:#10b981;transform:rotateX(90deg) translateZ(55px)}
        .d08-05-01-bottom{background:#3b82f6;transform:rotateX(-90deg) translateZ(55px)}
        .d08-05-01-hint{margin:0;font-size:11px;color:#94a3b8}

(function(){
        var root=document.getElementById('item-08-05-01');if(!root)return;
        var stage=root.querySelector('.d08-05-01-stage');
        var cube=root.querySelector('.d08-05-01-cube');
        var rx=-18,ry=28,dragging=false,lastX=0,lastY=0;
        function render(){cube.style.transform='rotateX('+rx+'deg) rotateY('+ry+'deg)';}
        render();
        stage.addEventListener('mousedown',function(e){dragging=true;lastX=e.clientX;lastY=e.clientY;});
        stage.addEventListener('mousemove',function(e){
          if(!dragging)return;
          ry+=(e.clientX-lastX)*.6;
          rx-=(e.clientY-lastY)*.6;
          lastX=e.clientX;lastY=e.clientY;
          render();
        });
        stage.addEventListener('mouseup',function(){dragging=false;});
        stage.addEventListener('mouseleave',function(){dragging=false;});
      })();