Full-Bleed Media Hero
Copy over your own image or video, with a graded scrim and deliberately fixed light-on-dark text — because the background is a photograph in both themes, so flipping the copy would break it.
Two faces, one element, rotated on hover or focus.
A flip card is a stack of two absolutely-positioned faces rotated 180° apart inside a `preserve-3d` parent. The part people get wrong is not the rotation, it is the content: whatever is on the back is invisible to anyone who does not hover, so it cannot be the only place important information lives.
A card that rotates 180° on the Y axis when hovered, revealing a different face on the back.
A purple hexagon (via clip-path) that flips on its Y axis while bouncing — geometric and modern.
Square-edged switch with an ocean gradient knob that slides horizontally. Shown in both states with labels.
Ocean card that flips in along the X axis with perspective.
Card that flips 180° on hover to reveal its reverse ocean face.
Button whose icon tile flips over like a coin on hover to reveal a checkmark on its back face.
A gold coin with two different faces spins continuously around its vertical axis.
A card that rotates around its vertical axis on hover to show a solid-colored back face.
Circular avatar showing initials that flips over in 3D on hover to reveal the name and role on its back.
Split-flap digit cards whose top half hinges forward on its axis and falls out of sight, the way a station clock turns over.
A payment form whose card preview turns a half rotation onto its magnetic-stripe back the moment the security-code field is reached, so the number you are being asked for is the one facing you.
Leaf hinged on the spine and swept through 180 degrees, darkening as it passes edge-on so the sheet reads as having two sides.
Upper cone draining and lower cone filling on matched clip-path keyframes, the whole body turning over only once the sand has run through.
Departure-board character cells split across a hinge, the top leaf folding forward on a stagger so the row clatters through left to right.
A word with a fading upside-down reflection below it, both drifting apart when hovered.
A framed hourglass whose upper chamber empties through a thin stream into the heap below, and once the sand has run through the whole frame turns over to start again.
A ghost button that fills from left to right with a solid color on hover, with the text color flipping in sync.
A teal wave rises from the bottom and floods the button on hover, with the text color flipping to white.
Type set in overlay blend over a grainy ocean field, flipping to difference on hover.
Entries flipping side to side across a centre spine, with each node punched out of the rail by a background-colored ring.
Toggle whose knob carries a spinner once flipped, for settings that persist over the network and are not actually on until the server says so.
Rule that draws left-to-right on enter and retracts to the right on leave, by flipping `transform-origin` between the two states.
Separated disclosure cards where the icon brightens and the chevron flips on open, both keyed off `[open]` rather than a toggled class.
Letterforms pressed into the surface by one dark and one light offset shadow, the pair swapping sides on hover so the relief flips from debossed to raised.
Showing 24 of 31. Search the rest →
Copy over your own image or video, with a graded scrim and deliberately fixed light-on-dark text — because the background is a photograph in both themes, so flipping the copy would break it.
A full row per feature with the media side flipping each time, so the eye re-enters the page instead of skimming a stack of identical blocks.
An action menu with the menu keyboard model in full: arrows, Home/End, typeahead, and Escape that returns focus to the trigger rather than dropping it on the page body. Its limits — no collision flip, no portal — are stated in the header.
Perspective, tilt and depth from transforms alone.
Lifts, tilts, spotlights and border reveals on a card surface.
Calendars, ranges, time fields and duration inputs.
Bento grids, alternating rows, icon lists and tabbed showcases.
Duotones, colour burns, knockout text and filter stacks.
Rotating loaders built from borders, conic gradients and dots.