3Dフリップ・ページめくり遷移

<div class="d08-04-11-stage">
          <div class="d08-04-11-flip">
            <div class="d08-04-11-face d08-04-11-front">
              <strong>サービス一覧</strong>
              <p>提供メニューを見る</p>
            </div>
            <div class="d08-04-11-face d08-04-11-back">
              <strong>導入事例</strong>
              <p>お客様の声を見る</p>
            </div>
          </div>
          <button type="button" class="d08-04-11-btn">裏面を見る</button>
        </div>

.prev.d08-04-11{padding:0;}
        .d08-04-11-stage{position:absolute;inset:0;overflow:hidden;font-family:sans-serif;perspective:900px;display:flex;align-items:center;justify-content:center;}
        .d08-04-11-flip{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.4,0,.2,1);}
        .d08-04-11-face{position:absolute;inset:0;backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#fff;}
        .d08-04-11-front{background:linear-gradient(135deg,#4f46e5,#6366f1);}
        .d08-04-11-back{background:linear-gradient(135deg,#0ea5e9,#0284c7);transform:rotateY(180deg);}
        .d08-04-11-flip.is-flipped{transform:rotateY(180deg);}
        .d08-04-11-face strong{font-size:18px;}
        .d08-04-11-face p{font-size:12px;margin:0;opacity:.85;}
        .d08-04-11-btn{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3;border:none;border-radius:999px;padding:6px 16px;font-size:12px;background:#fff;color:#333;cursor:pointer;}

(function(){
          var root=document.getElementById('item-08-04-11');
          if(!root) return;
          var flip=root.querySelector('.d08-04-11-flip');
          var btn=root.querySelector('.d08-04-11-btn');
          var on=false;
          btn.addEventListener('click',function(){
            on=!on;
            flip.classList.toggle('is-flipped',on);
            btn.textContent=on?'表面へ戻る':'裏面を見る';
          });
        })();