3D Effects Snippets — Free HTML CSS JS CSS 3D Tilt & Flip Examples

CSS gives you a real 3D transform pipeline without any WebGL: set a perspective, add transform-style: preserve-3d, and children rotate in actual depth. These snippets use it for tilt cards that follow the pointer, flip cards with a genuine back face, cube and coverflow carousels, and perspective grids that give a flat layout a sense of space.

Everything stays on the compositor, so the motion is smooth even on modest hardware — and it is all still DOM, so the content remains selectable, styleable and readable by assistive technology.

perspective and preserve-3d, and why both are required

A rotation only reads as three-dimensional when the parent establishes a perspective value — the notional distance from the viewer to the flat plane of the screen — and every level between that parent and the rotating element carries transform-style: preserve-3d. Miss either one and children flatten back into their parent's 2D plane regardless of how the rotation itself is defined, which is the single most common reason a "3D" transform renders looking completely flat.

Pointer-tracking tilt, done smoothly

A tilt card reads the pointer's position relative to the card's centre and maps that offset to small rotateX/rotateY values, so the card appears to lean toward the cursor. The snippets here ease that rotation back toward zero with a lerp rather than snapping instantly on pointer leave, which is what makes the return-to-rest feel like momentum settling rather than a hard reset.

Flip cards need backface-visibility, explicitly

Without backface-visibility: hidden on both faces, the front face's content stays visible — mirrored — through what should be the back of a flipped card, because CSS renders both sides of a rotated element by default. Setting hidden on each face and rotating the back face 180 degrees to start is what actually produces a card with a distinct front and back rather than a double-exposed smear mid-flip.

Where the GPU cost actually goes

CSS 3D transforms run on the compositor and never trigger layout or paint, which is what keeps them smooth even on modest hardware. The cost to watch instead is GPU memory: promoting many large elements onto their own composited layers — which preserve-3d and continuous transforms tend to do — can add up on mobile GPUs, so it is worth promoting only the elements that actually animate rather than every element in a 3D scene.