Perspective, tilt and depth from transforms alone.
Everything in 3D CSS comes from two properties: `perspective` on the parent and `transform-style: preserve-3d` on the child. Get those wrong and your rotations look like a flat image being squashed, which is the usual symptom. Keep the perspective distance large (800–1200px) unless you want the exaggerated, close-up look — small values read as a fisheye.
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 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 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 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.
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.
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 wooden door in a glowing amber frame that swings open on its left hinge in perspective to reveal the word inside on hover.
A phone mockup resting at a three-quarter angle that rotates flat to face you on hover while its screen content slides in.
A lime coin with a visible rim built from stacked discs spins on its vertical axis and speeds up on hover.
Orange opening-crawl text tilted back into the distance scrolls away from the viewer and holds still on hover.
A conference ID badge hanging from a rose lanyard sways side to side with a subtle Y-axis twist and swings faster on hover.
Showing 24 of 32. Search the rest →
Two faces, one element, rotated on hover or focus.
Lifts, tilts, spotlights and border reveals on a card surface.
Browser chrome, phone frames, terminals and screenshot surrounds.
Rotating loaders built from borders, conic gradients and dots.
Gradient outlines, running lights, dashes and glow rings.
Waves, slants, zigzags and fades between page sections.