3Dチルトカード

<div class="tilt05-01-05">
          <div class="card05-01-05">
            <div class="shine05-01-05"></div>
            <div class="badge05-01-05">NEW</div>
            <h4>プレミアムプラン</h4>
            <p>マウスの位置に合わせてカードが立体的に傾きます。</p>
          </div>
        </div>

.prev.d05-01-05{background:#1e2436}
        .d05-01-05 .tilt05-01-05{perspective:700px}
        .d05-01-05 .card05-01-05{
          position:relative;width:220px;height:190px;border-radius:16px;
          background:linear-gradient(150deg,#2f3a5c 0%,#232b45 100%);
          border:1px solid rgba(255,255,255,.12);
          padding:22px;color:#fff;overflow:hidden;cursor:pointer;
          transform-style:preserve-3d;transition:transform .15s ease-out;
          box-shadow:0 14px 30px rgba(0,0,0,.4);
        }
        .d05-01-05 .shine05-01-05{
          position:absolute;inset:-40%;
          background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.18),transparent 55%);
          pointer-events:none;opacity:0;transition:opacity .3s;
        }
        .d05-01-05 .card05-01-05.on05-01-05 .shine05-01-05{opacity:1}
        .d05-01-05 .badge05-01-05{
          display:inline-block;font-size:9px;letter-spacing:.12em;
          background:#e8b34b;color:#2a2410;padding:3px 8px;border-radius:99px;
          font-weight:700;margin-bottom:14px;
        }
        .d05-01-05 .card05-01-05 h4{margin:0 0 8px;font-size:15px}
        .d05-01-05 .card05-01-05 p{margin:0;font-size:11px;line-height:1.7;opacity:.75}

(function(){
        var card=document.querySelector('.d05-01-05 .card05-01-05');
        var shine=document.querySelector('.d05-01-05 .shine05-01-05');
        if(!card)return;
        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='rotateY('+(x*18)+'deg) rotateX('+(-y*18)+'deg)';
          shine.style.background='radial-gradient(circle at '+((x+.5)*100)+'% '+((y+.5)*100)+'%,rgba(255,255,255,.22),transparent 55%)';
          card.classList.add('on05-01-05');
        });
        card.addEventListener('mouseleave',function(){
          card.style.transform='rotateY(0) rotateX(0)';
          card.classList.remove('on05-01-05');
        });
      })();