CSS 3D & Perspective Effects

Streaks accelerating out of a vanishing point, each hottest at its head. Done in polar coordinates, so 180 of them cost exactly what one does.

Blue button with a solid extruded edge that compresses all the way down when pressed.

Ocean card that tilts in 3D space on hover and throws its shadow to the side.

Card that flips 180° on hover to reveal its reverse ocean face.

Six-faced cube in ocean colors, rotating continuously with real CSS 3D transforms.

Stacked text-shadow layers give the headline a solid blue extrusion that deepens on hover.

Stack of ocean cards that fans out on hover — depth from layering, not perspective, so it stays crisp.

Three ocean plates floating in isometric projection, each drifting on its own offset.

Three ocean planes laid out isometrically that pull apart in Z on hover.

Three panels turned toward a shared vanishing point, the flanking pair dimmed with `brightness` so depth reads without a fog layer.

Four layers shifted by different amounts on hover, blur increasing with distance so the depth cue is optical rather than just positional.

Leaf hinged on the spine and swept through 180 degrees, darkening as it passes edge-on so the sheet reads as having two sides.

Four labelled faces mounted around a shared axis at a quarter turn each, the drum rotating one detent on hover so the next word rolls up into place.

Hardcover hinged at the spine rather than the page edge, so it swings past 90 degrees and lies back against itself the way a real cover does.

A phone mockup resting at a three-quarter angle that rotates flat to face you on hover while its screen content slides in.

Cyan frames flying out of the distance toward the viewer on a loop, fading in far away and out as they pass the plane.

Stack of gradient rungs all turning about one vertical axis on a staggered offset, so the column reads as a double helix winding endlessly through the frame.

Four leaves hinged on their left edge and folded on a stagger, darkening as they turn away so the crease reads without a gradient overlay.

Six panels pushed out along Z at sixty-degree intervals and turned as one group, which is the whole trick behind a 3D carousel.

Four CSS triangles hinged at a shared base and splayed by quarter turns, tilted so the solid closes rather than reading as loose fins.

Ground plane laid flat under an 78-degree rotateX so the grid converges on a horizon, with the background position scrolling one cell per cycle to read as forward travel.

Five circles sharing a centre at even yaw offsets, which reads as a meridian cage once the whole group rotates — no sphere primitive required.

A lime coin with a visible rim built from stacked discs spins on its vertical axis and speeds up on hover.

Four indigo flaps hinged to an isometric base that swing outward together to reveal the mark printed inside.

A record deck laid back into the picture plane, the platter raised above the plinth and turning under a tonearm that creeps slowly inward across the grooves.

Orange opening-crawl text tilted back into the distance scrolls away from the viewer and holds still on hover.

A row of gradient slats that each turn a half revolution on a delay, so a twist travels along the ribbon and back.

A three by three field of isometric cubes, each built from a lit top and four shaded walls, riding up and down on a diagonal wave that crosses the grid.

A conference ID badge hanging from a rose lanyard sways side to side with a subtle Y-axis twist and swings faster on hover.

Three nested gimbal rings each turning about a different axis at its own speed around a bright core, so the assembly never repeats the same silhouette twice.

A stack of violet window slats tilts open in staggered 3D rotation on hover to reveal the glowing scene behind.

A wooden door in a glowing amber frame that swings open on its left hinge in perspective to reveal the word inside on hover.