#3d CSS effects

188 free, pure-CSS effects match the "3d" tag. Each is copy-ready and needs no library or build step.

Live preview Hover

Rotate 3D Spin

Diagonal 3D spin on hover.

#hover #transform #3d

Live preview Hover

Rotate 3D Tilt

Smooth 3D tilt on hover.

#hover #transform #3d

Live preview Hover

Rotate 3D Tumble

Tumbling multi-axis rotation on hover.

#hover #animation #transform

Live preview Hover

Rotate 3D Twist

Twisted 3D rotation on hover.

#hover #transform #3d

Live preview Hover

Rotate 3D Window

Window-shutter flip on hover.

#hover #transform #3d

Live preview Hover

3D Rotate Wobble

3D rotation with wobble on hover.

#hover #animation #transform

Live preview Hover

Rotate X Full

Full 360° rotation on X-axis on hover.

#hover #animation #transform

Live preview Hover

Rotate X Half

Half 180° rotation on X-axis on hover.

#hover #transform #3d

Live preview Hover

Rotate Y Full

Full 360° rotation on Y-axis on hover.

#hover #animation #transform

Live preview Hover

Rotate Y Half

Half 180° Y-axis rotation on hover.

#hover #transform #3d

Live preview Hover

Rubber Band

Element wobbles like a rubber band on hover.

#hover #animation #transform

Live preview Hover

3D Scale Pulse

3D pulsing scale on hover.

#hover #animation #transform

Live preview Hover

Shadow Perspective

Perspective floor shadow on hover.

#hover #gradient #transform

Live preview Hover

Sidespin

Element spins sideways on hover.

#hover #transform #3d

Live preview Hover

Flip Letters

Letters flip on hover.

#hover #transform #3d

Live preview Hover

Tilt Zoom

Tilt with zoom on hover.

#hover #transform #3d

Live preview Hover

Topspin

Element topspins forward on hover.

#hover #transform #3d

Live preview Hover

Tumble Back

Element tumbles backward in 3D on hover.

#hover #transform #3d

Live preview Hover

Unfold Open

Unfolds open on hover.

#hover #transform #3d

Live preview Hover

Unfold Spread

Unfolds spread on hover.

#hover #transform #3d

Live preview Hover

Venetian Tilt

Vertical venetian blind slats rotate in 3D to let light through on hover.

#gradient #hover #3d

Live preview Hover

Zoom Flip

Zoom with flip transform on hover.

#hover #transform #3d

Live preview Hover

3D Zoom Tilt

3D zoom tilt transform on hover.

#hover #transform #shadow

Live preview Loaders

Arcade Token

Arcade token spinning in air.

#animation #gradient #transform

Live preview Loaders

Card Trick Flip

Playing card flipping in magic trick.

#animation #gradient #transform

Live preview Loaders

Spinning Coin

A golden coin flipping end-over-end in 3D, catching the light.

#gradient #animation #3d

Live preview Loaders

3D Cube

Cube rotating in 3D space.

#animation #transform #border

Live preview Loaders

Dice Roll

A six-sided die tumbling in 3D space.

#animation #gradient #transform

Live preview Loaders

Disc Roll Edge

Disc rolling along its edge.

#animation #gradient #transform

Live preview Loaders

Discus Spin

Discus spinning in thrower's hand.

#animation #gradient #transform

Live preview Loaders

DNA Helix

Double helix DNA strand rotating.

#animation #transform #3d

Live preview Loaders

Flip Card

A gradient card flipping 180 degrees back and forth on its vertical axis.

#gradient #animation #3d

Live preview Loaders

Folding Cube 3D

3D cube with folding faces.

#animation #transform #3d

Live preview Loaders

Frisbee Throw

Frisbee spinning through air.

#animation #gradient #transform

Live preview Loaders

Grid 3D Pulse

3D grid of squares pulsing in sequence.

#animation #transform #3d

Live preview Loaders

Gyroscope Rings

Three concentric rings tilted on different 3D axes and spinning.

#animation #3d #border

Live preview Loaders

DNA Helix

Paired dots rotating in 3D to form a twisting double helix.

#animation #3d #shadow

Live preview Loaders

Hula Hoop Twirl

Hula hoop twirling around waist.

#animation #gradient #transform

Live preview Loaders

Icosahedron Spin

Twenty-sided polyhedron rotating.

#animation #transform #3d

Live preview Loaders

Octagon 3D Flip

Octagon flipping in 3D space.

#animation #gradient #transform

Live preview Loaders

Octahedron Spin

Eight-faced polyhedron rotating.

#animation #transform #3d

Live preview Loaders

Prism Rotate

Triangular prism rotating in 3D.

#animation #transform #border

Live preview Loaders

Spinning Pyramid

An amber triangle spinning on its vertical axis like a 3D pyramid.

#gradient #animation #3d

Live preview Loaders

3D Pyramid

Pyramid rotating in 3D space.

#animation #transform #border

Live preview Loaders

Square Flip Grid

Four squares flipping in 3D in a staggered wave.

#animation #3d #border

Live preview Loaders

Tetra Flip 3D

Tetrahedron flipping in 3D space.

#animation #transform #3d

Live preview Loaders

Tetrahedron Spin

3D tetrahedron rotating in space.

#animation #transform #3d

Live preview Loaders

Tilt-A-Whirl

A tilted disk wobbling and spinning erratically.

#animation #gradient #transform

Live preview Navigation

3D Perspective Navbar

Navbar with 3D hover lift and perspective transform.

#hover #transform #shadow

Live preview Navigation

3D Tilt X Navbar

Active link tilts on the X-axis with deep perspective.

#hover #transform #shadow

Live preview Navigation

3D Tilt XY Navbar

Active link tilts diagonally on both X and Y axes.

#hover #transform #shadow

Live preview Navigation

3D Tilt Y Navbar

Active link tilts on the Y-axis with deep perspective.

#hover #transform #shadow

Live preview Navigation

Arrow 3D Perspective Navbar

Nav with 3D perspective arrow-shaped active indicator.

#hover #transform #shadow

Live preview Navigation

Arrow Flip 3D Navbar

Nav arrow indicators flip in 3D on hover.

#hover #transform #3d

Live preview Navigation

3D Rotate Hamburger

Hamburger with full 3D rotation on hover.

#hover #transform #border

Live preview Navigation

3D Perspective Drawer Navbar

Drawer with a 3D perspective active link lifting forward.

#hover #transform #shadow

Live preview Navigation

3D Flip Card Navbar

Each link is a 3D flip card revealing a back face on hover.

#hover #transform #3d

Live preview Navigation

Horizontal Flip Navbar

Links flip horizontally (Y-axis) on hover for a side reveal.

#hover #transform #3d

Live preview Navigation

Vertical Flip Navbar

Links flip vertically (X-axis) on hover for a top-down reveal.

#hover #transform #3d

Live preview Navigation

Active 3D Pagination

Active page lifts in 3D perspective.

#hover #gradient #transform

Live preview Navigation

Active Flip Pagination

Active page flips on Y axis.

#hover #transform #shadow

Live preview Navigation

Hover 3D Pagination

Numbers lift in 3D on hover.

#hover #gradient #transform

Live preview Navigation

Hover Flip Pagination

Numbers flip on hover.

#hover #transform #3d

Live preview Navigation

Number 3D Pagination

Numbers with 3D lift on hover.

#hover #gradient #transform

Live preview Navigation

Number Flip Pagination

Numbers flip on Y axis on hover.

#hover #transform #3d

Live preview Navigation

Perspective Tilt Navbar

Active link lifts forward in 3D perspective with translateZ.

#hover #transform #shadow

Live preview Navigation

Slant 3D Fold Navbar

Nav with a 3D fold effect along the diagonal axis.

#hover #transform #3d

Live preview Navigation

Slant Perspective 3D Navbar

Nav with a perspective tilt creating a 3D slanted look.

#hover #transform #shadow

Live preview Navigation

3D Flip Tabs

Tabs with 3D flip animation on active state.

#hover #transform #shadow

Live preview Navigation

Cube Rotate Tabs

Tabs that rotate like a 3D cube on hover.

#hover #gradient #transform

Live preview Navigation

Flip 3D Tabs

Tabs with full 3D flip transform on hover.

#hover #gradient #transform

Live preview Navigation

Flip X Tabs

Tabs that flip on X axis on hover.

#hover #transform #shadow

Live preview Navigation

Flip Y Tabs

Tabs that flip on Y axis on hover.

#hover #transform #shadow

Live preview Navigation

3D Tilt Hover Navbar

Each link tilts in 3D space responding to hover with depth perspective.

#hover #gradient #transform

Live preview Navigation

Vertical Tab Flip Card

Vertical tabs that flip in 3D when active, revealing content.

#hover #transform #shadow

Live preview Text

3D Extruded Text

Layered 3D text with stacked shadow planes giving a chunky extruded look.

#3d #shadow

Live preview Text

3D Flip Card

Text flipping in 3D space like a card.

#animation #transform #3d

Live preview Text

Flip 3D Cube

3D cube flip rotation.

#animation #transform #3d

Live preview Text

Flip Clock Card

Text on a flip-clock style card that flips on the X axis periodically.

#gradient #animation #3d

Live preview Text

Retro 80s Neon

80s retro text with pink-cyan neon shadow stack and perspective tilt.

#animation #glow #3d

Live preview Text

3D Y-Rotate

Outlined text spinning continuously around the vertical Y axis in 3D.

#animation #3d #shadow

Live preview Text

3D X Rotation

Text rotating around the X axis in 3D.

#animation #transform #3d

Live preview Text

3D Y Rotation

Text rotating around the Y axis in 3D.

#animation #transform #3d

Live preview Text

Split-Flap Letters

Each letter flips sequentially like a split-flap departure board.

#animation #3d #border

Live preview Text

3D Wave Letters

Letters rotate on the X axis in a traveling wave for a 3D ripple effect.

#animation #3d #transform

Live preview Toggles

Barricade Flip

Construction barricade flips from stop to go.

#gradient #transform #3d

Live preview Toggles

Cube Roll 3D

Sharp cube knob rolls end-over-end across the dark track in 3D.

#gradient #transform #shadow

Live preview Toggles

Open / Closed Door

Wooden door swings open on a hinge with a 3D perspective rotation.

#gradient #3d #border

Live preview Toggles

3D Flip Switch

Knob flips in 3D space revealing an ON/OFF face as it travels across.

#3d #shadow #border

Popular tags