CSS15 · כרטיס תלת-ממד עוקב עכבר

CSS

/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.stage{padding:var(--sec, clamp(120px, 12vw, 260px)) var(--gutter, clamp(24px, 5vw, 96px));position:relative}
.stage.tight{padding-block:clamp(48px,5vw,90px)}
.stage.full{padding-inline:0}

/* CSS15 · כרטיס תלת-ממד עוקב עכבר */
.tilt{width:min(320px,80vw);margin-inline:auto;perspective:900px}
.tilt-in{position:relative;background:var(--card, #fff);border:1px solid var(--line, #e4e4ee);border-radius:18px;padding:34px;transition:transform .18s ease-out;transform-style:preserve-3d;overflow:hidden}
.tilt-in::after{content:"";position:absolute;inset:-40%;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(74,58,255,.14),transparent 55%)}
.tilt h3{margin:0 0 8px}.tilt p{margin:0;color:var(--muted, #6a6d85);font-size:14px}

HTML

<div class="stage tight"><div class="tilt"><div class="tilt-in">
<h3>כרטיס חי</h3><p>הזז את העכבר עליי ותרגיש את העומק.</p>
</div></div></div>

JS

const t=document.querySelector(".tilt"),ti=document.querySelector(".tilt-in");
t.addEventListener("mousemove",e=>{
  const r=t.getBoundingClientRect(),x=(e.clientX-r.left)/r.width,y=(e.clientY-r.top)/r.height;
  ti.style.transform="rotateY("+((x-.5)*14)+"deg) rotateX("+((.5-y)*10)+"deg)";
  ti.style.setProperty("--gx",(x*100)+"%");ti.style.setProperty("--gy",(y*100)+"%");
});
t.addEventListener("mouseleave",()=>ti.style.transform="none");