Scenes & objects 10 CSS 3D effects

Scenes & objects

Synthwave floor

Pure CSS

A gradient-drawn grid laid flat with rotateX, scrolling toward you forever.

Scenes & objects

Infinite tunnel

Pure CSS

Identical frames fly from far away to past the camera on staggered negative delays.

Scenes & objects

Warp starfield

Pure CSS

Each layer is ONE element; its stars are box-shadows generated by Sass random().

Scenes & objects

Depth parallax

CSS + JS

Layers sit at different translateZ depths; tilting the scene with the pointer makes them slide apart.

Scenes & objects

Door

Pure CSS

Hover or focus to open. The light behind is just the frame’s background.

Scenes & objects

Laptop lid

Pure CSS

The lid hinges on the back edge. Its two sides are separate faces: shell and screen.

Scenes & objects

Hanging sign

Pure CSS

A pendulum is just rotateX around the top edge with an ease-in-out alternate.

Scenes & objects

Folding map

Pure CSS

Nested panels, each hinged on its parent’s edge, folding up like a paper map.

Scenes & objects

Hover tiles

Pure CSS

Sweep across the floor. Tiles rise instantly and sink slowly, leaving a trail.

Scenes & objects

Confetti burst

CSS + JS

Click anywhere. JS spawns particles with random 3D vectors; one CSS animation flies them all.