チルト連動3Dパララックスカード

<div class="d08-05-10-stage">
          <div class="d08-05-10-card" id="d08-05-10-card">
            <div class="d08-05-10-layer d08-05-10-icon">★</div>
            <div class="d08-05-10-layer d08-05-10-title">プレミアムプラン</div>
            <div class="d08-05-10-layer d08-05-10-sub">高機能・優先サポート付き</div>
          </div>
        </div>

.d08-05-10-stage{perspective:800px}
        .d08-05-10-card{position:relative;width:180px;height:190px;margin:0 auto;border-radius:16px;background:linear-gradient(160deg,#0ea5e9,#6366f1);transform-style:preserve-3d;transition:transform .15s ease-out;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;overflow:hidden}
        .d08-05-10-layer{transition:transform .15s ease-out}
        .d08-05-10-icon{font-size:26px;color:#fde68a;transform:translateZ(50px)}
        .d08-05-10-title{font-size:14px;font-weight:700;color:#fff;transform:translateZ(35px)}
        .d08-05-10-sub{font-size:10px;color:rgba(255,255,255,.85);text-align:center;padding:0 20px;transform:translateZ(20px)}

(function(){
        var root=document.getElementById('item-08-05-10');if(!root)return;
        var card=root.querySelector('#d08-05-10-card');
        var layers=root.querySelectorAll('.d08-05-10-layer');
        card.addEventListener('mousemove',function(e){
          var r=card.getBoundingClientRect();
          var x=(e.clientX-r.left)/r.width-.5;
          var y=(e.clientY-r.top)/r.height-.5;
          card.style.transform='rotateX('+(-y*18)+'deg) rotateY('+(x*18)+'deg)';
          layers.forEach(function(l,i){
            var depth=[50,35,20][i]||20;
            var push=(i+1)*6;
            l.style.transform='translateZ('+depth+'px) translate('+(x*push)+'px,'+(y*push)+'px)';
          });
        });
        card.addEventListener('mouseleave',function(){
          card.style.transform='rotateX(0) rotateY(0)';
          layers.forEach(function(l,i){
            var depth=[50,35,20][i]||20;
            l.style.transform='translateZ('+depth+'px)';
          });
        });
      })();