パースペクティブ商品回転ビューア

<div class="d08-05-04-wrap">
          <div class="d08-05-04-stage">
            <div class="d08-05-04-card" id="d08-05-04-card">
              <div class="d08-05-04-face d08-05-04-front">
                <strong>Product A</strong>
                <span>¥4,800</span>
              </div>
              <div class="d08-05-04-face d08-05-04-back">
                <strong>スペック</strong>
                <ul><li>重量 320g</li><li>サイズ S/M/L</li><li>素材 アルミ</li></ul>
              </div>
            </div>
          </div>
          <button type="button" class="d08-05-04-btn">回転して詳細を見る</button>
        </div>

.d08-05-04-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
        .d08-05-04-stage{perspective:900px}
        .d08-05-04-card{position:relative;width:150px;height:170px;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.4,0,.2,1)}
        .d08-05-04-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px;text-align:center}
        .d08-05-04-front{background:linear-gradient(160deg,#1e293b,#334155);color:#fff}
        .d08-05-04-front strong{font-size:14px}
        .d08-05-04-front span{font-size:12px;color:#fbbf24}
        .d08-05-04-back{background:#fff;border:1px solid #e2e8f0;color:#334155;transform:rotateY(180deg)}
        .d08-05-04-back strong{font-size:12px}
        .d08-05-04-back ul{margin:0;padding:0;list-style:none;font-size:10px;line-height:1.9;color:#64748b}
        .d08-05-04-card.d08-05-04-spin{transform:rotateY(180deg)}
        .d08-05-04-btn{padding:7px 16px;border:none;border-radius:999px;background:#334155;color:#fff;font-size:11px;cursor:pointer}

(function(){
        var root=document.getElementById('item-08-05-04');if(!root)return;
        var card=root.querySelector('#d08-05-04-card');
        var btn=root.querySelector('.d08-05-04-btn');
        btn.addEventListener('click',function(){
          card.classList.toggle('d08-05-04-spin');
        });
      })();