3Dチルトホバーカード

<div class="d08-03-12-card">
          <span class="d08-03-12-ico">✦</span>
          <b>マウスで傾く</b>
          <p>カード上でマウスを動かしてみてください</p>
        </div>

.d08-03-12{perspective:700px}
        .d08-03-12-card{position:relative;width:200px;padding:28px 22px;border-radius:16px;background:linear-gradient(160deg,#1e293b,#0f172a);color:#fff;text-align:center;box-shadow:0 16px 34px rgba(0,0,0,.3);transform-style:preserve-3d;transition:transform .15s ease-out;overflow:hidden}
        .d08-03-12-ico{display:block;font-size:26px;color:#facc15;margin-bottom:10px}
        .d08-03-12-card b{display:block;font-size:14px;margin-bottom:6px}
        .d08-03-12-card p{margin:0;font-size:11px;color:#94a3b8;line-height:1.6}
        .d08-03-12-card::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.18) 50%,transparent 60%);transform:translateX(-100%);transition:transform .5s}
        .d08-03-12-card.is-glow::after{transform:translateX(100%)}

(function(){
        var wrap=document.querySelector('#item-08-03-12 .d08-03-12');
        var card=document.querySelector('#item-08-03-12 .d08-03-12-card');if(!wrap||!card)return;
        wrap.addEventListener('mousemove',function(e){
          var r=card.getBoundingClientRect();
          var px=(e.clientX-r.left)/r.width,py=(e.clientY-r.top)/r.height;
          var rx=(py-.5)*-18,ry=(px-.5)*18;
          card.style.transform='rotateX('+rx+'deg) rotateY('+ry+'deg)';
          card.classList.add('is-glow');
        });
        wrap.addEventListener('mouseleave',function(){card.style.transform='';card.classList.remove('is-glow');});
      })();