ページめくりスクラブ

<div class="view08-16-05">
          <div class="book08-16-05">
            <div class="pageBack08-16-05"></div>
            <div class="pageFront08-16-05">
              <div class="pf08-16-05-front"></div>
              <div class="pf08-16-05-back"></div>
            </div>
            <div class="spine08-16-05"></div>
          </div>
          <div class="scr08-16-05">
            <div class="sp08-16-05">
              <span class="hint08-16-05">↓ 枠内をスクロール<br>スクロール量に応じてページがめくれます</span>
            </div>
          </div>
        </div>

.d08-16-05{background:#78350f;align-items:stretch;}
        .d08-16-05 .view08-16-05{
          position:relative;width:100%;height:212px;border-radius:12px;
          overflow:hidden;background:linear-gradient(160deg,#92400e,#78350f);
          display:flex;align-items:center;justify-content:center;perspective:600px;
        }
        .d08-16-05 .book08-16-05{position:relative;width:140px;height:100px;}
        .d08-16-05 .pageBack08-16-05{position:absolute;inset:0;background:#f1f5f9;border-radius:0 6px 6px 0;box-shadow:inset -2px 0 4px rgba(0,0,0,.08);}
        .d08-16-05 .pageFront08-16-05{position:absolute;top:0;left:50%;width:70px;height:100px;transform-origin:left center;transform-style:preserve-3d;will-change:transform;}
        .d08-16-05 .pf08-16-05-front,.d08-16-05 .pf08-16-05-back{position:absolute;inset:0;backface-visibility:hidden;border-radius:0 6px 6px 0;}
        .d08-16-05 .pf08-16-05-front{background:#fff;box-shadow:2px 0 6px rgba(0,0,0,.1);}
        .d08-16-05 .pf08-16-05-back{background:#e2e8f0;transform:rotateY(180deg);}
        .d08-16-05 .spine08-16-05{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:rgba(0,0,0,.2);}
        .d08-16-05 .scr08-16-05{position:absolute;inset:0;overflow-y:auto;}
        .d08-16-05 .sp08-16-05{height:900px;padding:16px 18px 0;}
        .d08-16-05 .hint08-16-05{display:inline-block;font-size:11.5px;line-height:1.7;color:#fff7ed;background:rgba(41,17,4,.55);padding:8px 12px;border-radius:8px;}

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