3D tilt (perspective hover)
A card that tips in 3D as the pointer moves across it, making a flat surface feel like a physical object.
See it
What it is
A 3D tilt maps pointer position across a card to rotateX and rotateY, making its surface appear to tip toward the viewer. CSS perspective creates foreshortening, while layered children or a restrained highlight can make the depth easier to read.
Reach for it on product cards, album art, game tiles, and special portfolio pieces where the surface should feel like an object rather than a flat link. Apple TV does the version most people have already seen: the focused poster tips toward you as your thumb moves on the remote. Calculate pointer position relative to the card's center, normalize each axis from -1 to 1, and map that range to a small rotation.
Gotcha: rotateX follows vertical pointer movement and rotateY follows horizontal movement, and one of the two signs has to be negated or the card tips away from the pointer instead of toward it. Cap rotation around 6 to 10 degrees, reset smoothly on pointerleave, and keep the hit area stationary. Limit it to fine pointers and remove the tilt under prefers-reduced-motion.
Ask AI for it
Build a perspective hover tilt with CSS transforms and the Pointer Events API. Put perspective: 800px on a stationary wrapper, normalize the pointer position across the card from -1 to 1, and map it to rotateX and rotateY capped at 8deg. Apply transform-style: preserve-3d to the card, smooth updates with requestAnimationFrame, return to rotateX(0) rotateY(0) on pointerleave, and disable the effect for coarse pointers and prefers-reduced-motion.