3Dギフトボックス開梱演出

<div class="d08-05-12-wrap">
          <div class="d08-05-12-stage">
            <div class="d08-05-12-box">
              <div class="d08-05-12-content">🎁 特典コード<br><b>WELCOME10</b></div>
              <div class="d08-05-12-lid"></div>
            </div>
          </div>
          <button type="button" class="d08-05-12-btn">ボックスを開ける</button>
        </div>

.d08-05-12-wrap{display:flex;flex-direction:column;align-items:center;gap:16px}
        .d08-05-12-stage{perspective:700px}
        .d08-05-12-box{position:relative;width:130px;height:110px}
        .d08-05-12-content{position:absolute;left:8px;right:8px;bottom:6px;height:70px;border-radius:8px;background:linear-gradient(160deg,#fef3c7,#fde68a);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;color:#78350f;text-align:center;line-height:1.6;transform:translateY(14px) scale(.85);opacity:0;transition:transform .5s cubic-bezier(.2,1.4,.4,1) .3s,opacity .4s ease .3s}
        .d08-05-12-content b{font-size:12px}
        .d08-05-12-lid{position:absolute;left:0;right:0;bottom:66px;height:44px;border-radius:8px 8px 4px 4px;background:linear-gradient(160deg,#f59e0b,#d97706);transform-origin:bottom center;transform:rotateX(0deg);transition:transform .55s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 10px rgba(217,119,6,.3)}
        .d08-05-12-box.is-open .d08-05-12-lid{transform:rotateX(-118deg)}
        .d08-05-12-box.is-open .d08-05-12-content{transform:translateY(0) scale(1);opacity:1}
        .d08-05-12-btn{border:none;border-radius:999px;padding:8px 18px;background:#1e293b;color:#fff;font-size:12px;cursor:pointer}

(function(){
        var root=document.getElementById('item-08-05-12');if(!root)return;
        var box=root.querySelector('.d08-05-12-box');
        var btn=root.querySelector('.d08-05-12-btn');
        btn.addEventListener('click',function(){
          var open=box.classList.toggle('is-open');
          btn.textContent=open?'閉じる':'ボックスを開ける';
        });
      })();