Experiment 07 · Advanced

3D Tilt — a card with real depth.

A glass card that leans into the pointer in real 3D — perspective, dynamic highlight and floating layers at different depths.

Technique · 3D cursor tilt Hint · Circle the card Level · 07 / 10
Demo 07 · 3D Tilt
Interaction REV 3.2

The

Lab.

Cursor tilt / css 3d
depth · 60px
✦
Technique

Perspective, sheen and parallax floaters

The pointer is normalised to a −1…1 plane across the stage. That drives rotateX / rotateY on a preserve-3d wrapper, while the sheen tracks the same position for a moving highlight.

◈

Floating layers

Two small "floater" chips sit at translateZ(±60px) so they drift independently of the card — layers add genuine parallax depth.

✦

Soft shadow

Below the card, a blurred radial shadow shifts opposite to the tilt, anchoring the floating object to its surface.

Everything eases with damped smoothing for a weightless, cinematic glide.

Keep exploring

More motion experiments