MOTION / CSS 3D transforms · Pointer Events · requestAnimationFrame

Card Transform Studio

Explore bounded perspective, layered transforms, and accessible pointer-driven motion.

LIVE SURFACE / 01

Move through the card’s depth. Feel the geometry.

STUDIO / CARD-TRANSFORM

The canvas is ready
when you are.

Nothing runs in the background. Open the preview to start the experiment.

FIELD NOTES / INTERACTION GEOMETRY

Make depth legible, bounded, and optional.

Perspective is projection

CSS perspective defines the viewer distance from the z=0 plane in pixels. A shorter distance magnifies depth and distortion; a longer distance approaches an orthographic view. The perspective belongs on the parent stage, while preserve-3d keeps child layers in that shared space.

Compose transforms deliberately

The runtime maps normalized pointer coordinates from -1…1 to bounded X and Y rotations. CSS transform functions compose in order: each layer keeps its own translateZ depth, while the card receives the shared rotation. Explicit center origins make the rotation predictable.

Depth separates layers

Layer depth is a pixel offset along Z, clamped so the farthest layer remains modest. It changes parallax and perceived scale under perspective. More separation is not automatically more dimensional; too much makes the composition look detached.

Smoothing is not a spring

Frame-rate-independent exponential interpolation uses the smoothing control as a response time: the pose closes a stable fraction of the remaining error each frame. It is deterministic and has no overshoot. A physical spring adds velocity and can overshoot; use one only when that behavior serves the design.

Animate compositor-friendly properties

The active loop writes transform and opacity only, and requestAnimationFrame runs only while the pose is changing. Transform may be composited by the browser, but GPU promotion is not guaranteed and too many layers consume memory. Avoid layout reads or blanket will-change in the frame loop.

Pointer, touch, and keyboard

Pointer coordinates are normalized against the card’s current bounding rectangle. Touch uses pointer capture while the browser keeps vertical page panning available; cancellation releases the gesture and returns to center. Arrow keys provide the same bounded virtual input, and Home resets it.

Reduced motion and pause

The host initializes the toggle from the system preference and sends the effective value. Reduced motion applies input directly without interpolation and does not animate back when focus or pointer leaves. Pause freezes the visible pose and drops active frames; resume eases toward the latest input.

Common failure modes

Unbounded angles flip the card; mixing pointer coordinates with viewport coordinates shifts the neutral point; and reading layout every frame forces work. Overflow clipping or isolation on a preserve-3d scene flattens its Z layers. Keep the scene free of grouping properties, round the individual surfaces, and keep inputs finite and clamped.

SOURCE / LICENSE

Original implementation · MIT · no external assets

View source