CSS 3D Hover Effects

38 3D hover effects built with CSS perspective and transforms: flip cards, tilts, rotating cubes, opening doors, paper folds and layered depth.

3D Tilt Card

The card tips back and to the side in 3D as if pushed at one corner. Pure CSS tilts in a fixed direction; it does not follow the cursor, and it does not need to.

card · 3d

Flip Card

The card turns over to show its back. Front and back are stacked faces with backface-visibility hidden inside a 3D-preserving wrapper, so both sides render crisply.

card · 3d

Flip Down Fill Button

The fill swings down from a hinge along the top edge, overshoots a little and settles, like a flap falling shut. A perspective rotateX with a damped linear() easing curve.

button · fill · 3d

Parallax Layers Image Hover

A landscape split into sky, ridge and hills that slide at different speeds on hover, so the near hills travel most and the sky least. Three transformed layers, no JavaScript.

image · 3d · playful

Social Icons Flip Hover

Rounded social tiles that spin a full turn on the Y axis when hovered and land in solid color. The color swaps while the tile is edge-on, so the change is hidden by the turn.

social · icon · 3d

3D Cube Flip Button

The button is the front of a cube. On hover the cube rolls forward and its top face, filled with a second label, turns to face you. Two faces on a preserve-3d box.

button · 3d · fill

Split Flap Button

A departure board flap: the top half of the label falls forward on its hinge and lands with a small bounce, showing the next word. Four half-height copies of the text and one rotating flap.

button · 3d · playful

Rotating Prism Button

A triangular prism with a label on each side. While hovered it rolls through all three faces with a pause on each, so one button carries a call to action and two reassurances.

button · 3d · text

Vertical Flip Card Hover

A business card that flips top over bottom to show the contact details, overshooting a little as it lands. The two-face flip card trick, turned on the X axis instead of Y.

card · 3d · tailwind

Door Open Card Hover

A panelled door swings inward on its hinge to show a lit room and a message behind it. One element rotates on its left edge and dims as it turns; the frame and room stay flat.

card · 3d · reveal · playful

3D Book Hover Effect

A hardcover book with a real spine and page block. At rest it shows the cover and the page edges; on hover it turns the other way to show the spine. Four faces on a preserve-3d box.

card · 3d · shadow

Page Turn Hover Effect

An open book whose right-hand page turns over on hover and lands on the left, showing the picture printed on its back. The leaf has two faces and hinges on the spine.

card · 3d · reveal

Paper Fold Card Hover

A travel card folded into three zig-zag panels like a brochure. On hover the folds open flat. Each panel hangs from the one above it, so one rotation per panel drives the whole fold.

card · 3d · image · reveal

Envelope Open Hover Effect

An envelope whose flap swings open on hover, then the letter slides up out of the pocket. The flap drops behind the letter halfway through, and leaving plays the steps in reverse.

card · 3d · reveal · playful

Tile Flip Grid Hover

A night scene split into fifteen tiles that flip in a diagonal wave to show the same view by day. Every tile reads its own slice of one shared background, so both pictures line up.

image · 3d · reveal

Accordion Fold Image Hover

A landscape cut into five vertical strips that pleat into an accordion on hover, alternate strips turning toward and away from the light. Each strip slides in so the folds stay joined.

image · 3d · playful

Layered Depth Card Hover

The card tilts and its contents lift off the background at different depths: the ridge a little, the title more, the badge and button most. Each layer is its own translateZ inside a preserve-3d card.

card · 3d · shadow

3D Notification Stack Hover

Three notifications stacked in depth, the older ones sunk back and peeking out below. On hover they come forward and spread into a list. Stacking uses translateZ, so the depth is real perspective.

card · 3d · shadow

Gift Box Open Hover Effect

A ribboned gift box drawn as a real 3D box. On hover the lid springs up and tips back while a sparkle rises out of the opening. Box and lid are separate preserve-3d groups of faces.

icon · 3d · playful

Isometric Card Hover

A card laid out in isometric view with visible thickness. On hover it floats up off the surface while its shadow slides away and softens. Real side faces, so the slab has depth at any size.

card · 3d · shadow

Venetian Blinds Hover Effect

A window with its blinds closed. On hover the slats tilt open one after another, top to bottom, and the sunrise behind them comes through. Each slat rotates on X around its own center.

card · 3d · reveal

Pop-Up Card Hover Effect

A folded greeting card lying on a table. On hover the cover swings up on its crease and a heart stands up out of the fold, like a pop-up book. Cover, base and heart share one tilted 3D plane.

card · 3d · playful · reveal

Stand Up Card Hover

The card rests tipped back as if lying on a desk, and stands up to face you on hover with a springy overshoot. It hinges on its bottom edge, and a shade on the card lifts as it rises.

card · 3d · tailwind

Push In Card Hover

The card sinks into a slot in the page on hover, and the slot's four inner walls come into view around it. The walls are real planes behind the card, so the depth holds up at any size.

card · 3d · shadow · minimal

Cover Flow Hover Effect

Three album covers in the classic cover flow pose, the side ones turned inward and set back. On hover they swing flat and spread into a row. Each cover is one element with its own 3D transform.

image · 3d · card

Hanging Sign Flip Hover

A shop sign hanging from a nail that spins round to its other side on hover and swings a few times before it settles. The spring is a linear() easing curve, with a cubic-bezier fallback.

card · 3d · playful

3D Extruded Text Hover

Heavy lettering with a short extrusion that deepens as the word rises toward you on hover. The depth is ten stacked text-shadows in a darker shade of the accent, so it scales with the font.

text · 3d · shadow

3D Word Cylinder Text Hover

Eight words set around a drum that sits in a sentence. Hover and the drum ticks round one word at a time, like a slot reel or a date picker, with the neighbors fading off the curve.

text · 3d · playful

Coin Flip Icon Hover

An icon button shaped like a coin that hops, spins two and a half turns and lands on its back, trading a star for a check. Stacked discs give the rim real thickness when it turns edge on.

icon · button · 3d · playful

3D Drawer Open Hover Effect

A filing cabinet whose top drawer slides out toward you on hover, showing its floor, walls and the folders inside. The cabinet face hides everything behind it until the drawer comes forward.

card · 3d · reveal · playful

3D Dice Roll Hover Effect

A six-sided die built from six faces with dotted pips. On hover it tumbles on two axes and comes to rest showing a six. Both rotations are one transition, so leaving rolls it back the other way.

icon · 3d · playful

3D Carousel Ring Hover

Six picture cards stand in a ring seen slightly from above. Hover and the ring spreads out and spins; leave and it stops where it is, because hover only toggles animation-play-state.

image · 3d · card

Ticket Stub Fold Hover

A concert ticket whose stub folds over along the perforation on hover, landing face down on the ticket to show the QR code printed on its back. The stub hinges on its left edge.

card · 3d · reveal

Perspective Text Crawl Hover

Justified text laid on a plane that tilts away into a starfield. Hover and it scrolls off into the distance, fading as it goes, then fades back in to loop. Needs only rotateX and translateY.

text · 3d · playful

Layered 3D Text Hover

A word that looks flat until you hover, when it turns in space and splits into a stack of outlined slices trailing behind it. Eight copies of the text spread along translateZ with a stagger.

text · 3d · minimal

3D Letter Flip Text Hover

Letters somersault one after another on hover and land in the accent color. Each span flips a full turn on X with its own perspective(), so the word stays flat enough for any layout.

text · 3d · playful

Keyboard Shortcut Key Hover

A docs search button whose shortcut keys press down one after the other on hover, then stay lit, as if you had just typed the combo. The keycaps get their depth from a bottom shadow.

button · 3d · playful

Cursor Tilt Card Hover

A plan card that tips the corner under the pointer toward you, with a glare that follows. A 3x3 grid of invisible cells sets the tilt, so it tracks the pointer in nine steps without JavaScript.

card · 3d · shine · gradient

How to use these 3d hover effects

Open any effect, copy the HTML into your markup and the CSS into your stylesheet. Nothing else is required: no JavaScript, no libraries. Classes are prefixed per effect so several can share a page.

To change the color, set --hfx-color on the element or any ancestor. To change the size, set --hfx-size: every dimension inside is in em, so padding, radii and offsets scale together.

Every snippet ships with a prefers-reduced-motion rule that disables the movement for people who asked their OS for less of it. The hover state still applies, only the transition is skipped.