#transform CSS effects

5,986 free, pure-CSS effects match the "transform" tag. Each is copy-ready and needs no library or build step.

Live preview Hover

Rotate 3D Card

Playing card 3D flip on hover.

#hover #transform #border

Live preview Hover

Rotate 3D Combo

Combined X+Y+Z rotation on hover.

#hover #transform #3d

Live preview Hover

Rotate 3D Cube

Cube-face rotation on hover.

#hover #transform #3d

Live preview Hover

Rotate 3D Door

Door-swing rotation on hover.

#hover #transform #border

Live preview Hover

Rotate 3D Envelope

Envelope flap fold on hover.

#hover #transform #border

Live preview Hover

Rotate 3D Fold

Fold-over 3D on hover.

#hover #transform #3d

Live preview Hover

Rotate 3D Origami

Origami fold on hover.

#hover #transform #3d

Live preview Hover

Rotate 3D Page

Page-turn 3D flip on hover.

#hover #transform #border

Live preview Hover

Rotate 3D Panel

Panel swing on hover.

#hover #transform #3d

Live preview Hover

Rotate 3D Paper Boat

Paper boat rocking on hover.

#hover #transform #3d

Live preview Hover

Rotate 3D Paper Plane

Paper-plane banking on hover.

#hover #transform #3d

Live preview Hover

Rotate 3D Roll

Continuous 3D roll on hover.

#hover #animation #transform

Live preview Hover

Rotate 3D Shutter

Camera shutter flip on hover.

#hover #transform #3d

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

Rotate Full Spin

Element does a full 360 spin on hover.

#hover #transform

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

Rotate Z Full

Full 360° Z-axis spin on hover.

#hover #animation #transform

Live preview Hover

Rotate Z Half

Half 180° Z-axis rotation on hover.

#hover #transform

Live preview Hover

Rotate Z Spin

Element rotates 180 degrees on Z axis on hover.

#hover #transform

Live preview Hover

Rubber Band

Element wobbles like a rubber band on hover.

#hover #animation #transform

Live preview Hover

Rubber Snap

Rubber-band snap transform on hover.

#hover #animation #transform

Live preview Hover

Scale Grow

Element scales up uniformly on hover.

#hover #transform

Live preview Hover

3D Scale Pulse

3D pulsing scale on hover.

#hover #animation #transform

Live preview Hover

Scale Shrink

Element shrinks down on hover.

#hover #transform

Live preview Hover

Seesaw Gentle

Gentle seesaw tilt on hover.

#hover #animation #transform

Live preview Hover

Seesaw Tilt

Element tilts like a seesaw on hover.

#hover #animation #transform

Live preview Hover

Seesaw Violent

Violent seesaw motion on hover.

#hover #animation #transform

Live preview Hover

Shadow 3D Deep

Deep 3D extruded shadow on hover.

#hover #transform #shadow

Live preview Hover

Shadow Angled

Sharp angled offset shadow on hover.

#hover #transform #shadow

Live preview Hover

Shadow Colored

Vibrant colored shadow on hover.

#hover #transform #shadow

Live preview Hover

Shadow Extend

Drop shadow stretches long and offset on hover.

#hover #transform #shadow

Live preview Hover

Shadow Hard Edge

Crisp hard-edged shadow on hover.

#hover #transform #shadow

Live preview Hover

Shadow Layered

Stacked layered shadows on hover.

#hover #transform #shadow

Live preview Hover

Shadow Long Tail

Long tail shadow streams on hover.

#hover #transform #shadow

Live preview Hover

Shadow Perspective

Perspective floor shadow on hover.

#hover #gradient #transform

Live preview Hover

Shadow Short Pop

Short tight shadow pop on hover.

#hover #transform #shadow

Live preview Hover

Shadow Soft

Soft diffuse shadow on hover.

#hover #transform #shadow

Live preview Hover

Shake Diagonal

Diagonal shake on hover.

#hover #animation #transform

Live preview Hover

Shake Horizontal

Horizontal shake on hover.

#hover #animation #transform

Live preview Hover

Mini Shake

Subtle small shake on hover.

#hover #animation #transform

Live preview Hover

Shake Random

Random multi-axis shake on hover.

#hover #animation #transform

Live preview Hover

Shake Side

Element shakes horizontally on hover.

#hover #animation #transform

Live preview Hover

Shake Subtle

Subtle micro-shake on hover.

#hover #animation #transform

Live preview Hover

Shake Vertical

Vertical shake on hover.

#hover #animation #transform

Live preview Hover

Shake Violent

Violent intense shake on hover.

#hover #animation #transform

Live preview Hover

Shatter Glass

Shatters into glass shards on hover.

#hover #gradient #transform

Live preview Hover

Shine Line Sweep

A bright shine band sweeps diagonally across the icon button.

#gradient #hover #border

Live preview Hover

Shine Swipe Panel

A narrow highlight sweeps diagonally across the panel exactly once per hover.

#hover #gradient #transform

Live preview Hover

Shiver Frost

Frosty shiver on hover.

#hover #animation #transform

Live preview Hover

Shrink Fade

Element shrinks and fades on hover.

#hover #transform

Live preview Hover

Shrink Vanish

Shrinks toward vanish on hover.

#hover #transform

Live preview Hover

Shudder Cold

Cold shudder on hover.

#hover #animation #transform

Live preview Hover

Shutter Open

Horizontal shutter opens on hover.

#hover #transform

Live preview Hover

Sidespin

Element spins sideways on hover.

#hover #transform #3d

Live preview Hover

Sink Down

Element sinks downward on hover.

#hover #transform

Live preview Hover

Skew Shift Tile

The tile leans into a slight skew and its shadow slides out to keep it grounded.

#hover #gradient #transform

Live preview Hover

Skew X

Element skews horizontally on hover.

#hover #transform

Live preview Hover

Skew Y

Element skews vertically on hover.

#hover #transform

Live preview Hover

Skew Y Deep

Deep Y-axis skew on hover.

#hover #transform

Live preview Hover

Slide Diagonal Reveal

Diagonal slide reveal on hover.

#hover #transform

Live preview Hover

Slide Down Fast

Fast downward slide on hover.

#hover #transform

Live preview Hover

Slide Down Reveal

Content slides down to reveal hidden layer on hover.

#hover #transform

Live preview Hover

Slide Down Soft

Soft slide downward on hover.

#hover #transform

Live preview Hover

Slide Left Fast

Fast slide to left on hover.

#hover #transform

Live preview Hover

Slide Left Reveal

Content slides left to reveal hidden layer on hover.

#hover #transform

Live preview Hover

Slide Left Soft

Soft slide to left on hover.

#hover #transform

Live preview Hover

Slide Reveal Overlay

A colored panel slides up from below, swapping the label text color.

#gradient #hover #border

Live preview Hover

Slide Right Fast

Fast slide to right on hover.

#hover #transform

Live preview Hover

Slide Right Reveal

Content slides right to reveal hidden layer on hover.

#hover #transform

Live preview Hover

Slide Right Soft

Soft slide to right on hover.

#hover #transform

Live preview Hover

Slide Up Fast

Fast upward slide on hover.

#hover #transform

Live preview Hover

Slide Up Reveal

Content slides up to reveal hidden layer on hover.

#hover #transform

Live preview Hover

Slide Up Soft

Soft slide upward on hover.

#hover #transform

Live preview Hover

Smoke Rise

Smoke rises upward on hover.

#hover #gradient #transform

Live preview Hover

Smoke Wisp

Smoke wisps drift upward on hover.

#hover #animation #transform

Live preview Hover

Snow Swirl

Snow swirls in vortex on hover.

#hover #animation #gradient

Live preview Hover

Somersault

Element does a somersault on hover.

#hover #transform

Live preview Hover

Sparkle Burst

Sparkles burst outward on hover.

#hover #transform

Live preview Hover

Sparks Burst

Sparks burst outward on hover.

#hover #transform #shadow

Live preview Hover

Sparks Rain

Sparks rain down on hover.

#hover #animation #gradient

Live preview Hover

Sparks Trail

Trail of sparks follows on hover.

#hover #animation #gradient

Live preview Hover

Spasm Jolt

Sudden spasm jolt on hover.

#hover #animation #transform

Live preview Hover

Fast Spin

Rapid continuous spin on hover.

#hover #animation #transform

Live preview Hover

Soft Spin

Soft 180-degree spin on hover.

#hover #transform

Live preview Hover

Spin Zoom

Combined spin and zoom on hover.

#hover #transform

Live preview Hover

Spotlight Zoom

Spotlight zooms in and brightens on hover.

#hover #gradient #transform

Live preview Hover

Spring Bounce

Spring-loaded bounce on hover.

#hover #transform

Live preview Hover

Squash Flat

Element squashes flat on hover.

#hover #transform

Popular tags