Tilt Card with Glare
Card that tilts in 3D towards your cursor with a soft moving glare. Springs back to flat when the pointer leaves.
Preview and code
index.html
<div class="tw"><div class="tc"><div class="gl"></div><small>PREMIUM</small><b>Tilt me</b><p>Move your cursor across the card to see 3D tilt + glare.</p></div></div>
styles.css
.tw{width:100%;height:100%;min-height:380px;display:grid;place-items:center;perspective:700px;font-family:system-ui,-apple-system,sans-serif;color:#eee;}.tc{position:relative;width:230px;padding:20px;box-sizing:border-box;background:#1b1b1b;border:1px solid #2a2a2a;border-radius:18px;overflow:hidden;transition:transform .35s cubic-bezier(.3,1.3,.5,1);transform-style:preserve-3d}.tc.m{transition:transform .08s}.tc small{font-size:10px;letter-spacing:.14em;color:#888}.tc b{display:block;font-size:22px;margin:8px 0}.tc p{margin:0;font-size:12px;color:#888;line-height:1.5}.gl{position:absolute;inset:0;background:radial-gradient(circle at var(--x,50%) var(--y,50%),rgba(255,255,255,.14),transparent 55%);opacity:0;transition:opacity .3s;pointer-events:none}.tc.m .gl{opacity:1}
script.js
(function(){var c=document.querySelector(".tc");c.onpointermove=function(e){var r=c.getBoundingClientRect(),x=(e.clientX-r.left)/r.width,y=(e.clientY-r.top)/r.height;c.classList.add("m");c.style.transform="rotateX("+((.5-y)*18)+"deg) rotateY("+((x-.5)*18)+"deg)";c.style.setProperty("--x",x*100+"%");c.style.setProperty("--y",y*100+"%")};c.onpointerleave=function(){c.classList.remove("m");c.style.transform=""}})();