3D tilt card

<div class="tilt-stage">
  <article class="tilt">
    <span class="tilt-tag">New</span>
    <h3>Tilt card</h3>
    <p>Move the pointer over me, or press and drag on a phone.</p>
  </article>
</div>

/* perspective on the parent is what turns the rotation into depth. */
.tilt-stage { perspective: 700px; width: min(320px, 100%); }

.tilt {
  position: relative;
  width: 100%;
  padding: 28px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), 0 24px 50px -28px rgba(0, 0, 0, 0.5);
  transform: rotateX(var(--rotate-x, 0deg)) rotateY(var(--rotate-y, 0deg));
  transform-style: preserve-3d;   /* lets the children sit at different depths */
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  touch-action: none;
}
.tilt.tracking { transition-duration: 0.1s; } /* follow quickly while the pointer moves */

/* Each layer floats a little further off the card, so it shifts against the
   surface as the card tilts. This is what makes it read as 3D. */
.tilt-tag { display: inline-block; transform: translateZ(50px); }
.tilt h3 { transform: translateZ(36px); }
.tilt p { transform: translateZ(20px); }

.tilt-tag {
  padding: 3px 9px;
  border-radius: 99px;
  font: 600 11px system-ui, sans-serif;
  color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.tilt h3 { margin: 14px 0 6px; font: 700 22px system-ui, sans-serif; letter-spacing: -0.02em; }
.tilt p { margin: 0; color: var(--muted); font: 15px/1.5 system-ui, sans-serif; }

// 3D tilt card: converts the pointer's position over the card into a small
// rotation, up to `maxTilt` degrees at the edges.

const prefersReducedMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
const maxTilt = prefersReducedMotion ? 5 : 14; // degrees; gentler, not gone, with reduced motion

document.querySelectorAll('.tilt').forEach((card) => {
  function tiltToward(event) {
    const box = card.getBoundingClientRect();
    // Position across the card from 0 to 1 on each axis.
    const across = (event.clientX - box.left) / box.width;
    const down = (event.clientY - box.top) / box.height;

    card.classList.add('tracking');
    card.style.setProperty('--rotate-y', `${(across - 0.5) * 2 * maxTilt}deg`);
    card.style.setProperty('--rotate-x', `${(0.5 - down) * 2 * maxTilt}deg`);
  }

  function flatten() {
    card.classList.remove('tracking');
    card.style.setProperty('--rotate-x', '0deg');
    card.style.setProperty('--rotate-y', '0deg');
  }

  card.addEventListener('pointermove', tiltToward);
  card.addEventListener('pointerleave', flatten);

  // Touch: capture the finger so dragging past the edge keeps tilting, then flatten on release.
  card.addEventListener('pointerdown', (event) => {
    if (event.pointerType === 'touch') {
      card.setPointerCapture(event.pointerId);
      tiltToward(event);
    }
  });
  card.addEventListener('pointerup', (event) => { if (event.pointerType === 'touch') flatten(); });
  card.addEventListener('pointercancel', flatten);
});