#transform CSS effects

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

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

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 X

Element skews horizontally on hover.

#hover #transform

Live preview Hover

Skew X Deep

Deep X-axis skew 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 Random Reveal

Random-direction slide reveal 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 Curl

Smoke curls upward on hover.

#hover #animation #gradient

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 Fly

Sparks fly outward on hover.

#hover #animation #transform

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

Live preview Hover

Stage Light Spot

Theatrical stage spot on hover.

#hover #gradient #transform

Live preview Hover

Starburst Rays

Radiating starburst rays on hover.

#hover #gradient #transform

Live preview Hover

Stars Burst

Tiny stars burst outward on hover.

#hover #animation #transform

Live preview Hover

Stars Shoot

Shooting stars streak on hover.

#hover #animation #transform

Live preview Hover

Stars Spin

Stars spin in galaxy on hover.

#hover #animation #gradient

Live preview Hover

Static Noise

TV static noise overlay fills the panel with rapid random flicker on hover.

#animation #hover #border

Live preview Hover

Stretch Tall

Element stretches tall and thin on hover.

#hover #transform

Live preview Hover

Stretch Taller

Stretches taller on hover.

#hover #transform

Live preview Hover

Stretch Wider

Stretches wider on hover.

#hover #transform

Live preview Hover

Stretch X

Element stretches horizontally on hover.

#hover #transform

Live preview Hover

Stretch Y

Element stretches vertically on hover.

#hover #transform

Live preview Hover

Stretchy Pull

Stretchy elastic pull on hover.

#hover #transform

Live preview Hover

Sway Gentle

Element sways gently side to side on hover.

#hover #animation #transform

Live preview Hover

Sway Violent

Violent swaying motion on hover.

#hover #animation #transform

Live preview Hover

Swing Gentle

Gentle pendulum swing on hover.

#hover #animation #transform

Live preview Hover

Swing Pendulum

Element swings like a pendulum on hover.

#hover #animation #transform

Live preview Hover

Swing Violent

Violent full-arc swing on hover.

#hover #animation #transform

Live preview Hover

Teal Shift

Hue rotates to teal on hover.

#hover #transform #filter

Live preview Hover

Teeter Hard

Hard teeter on edge on hover.

#hover #animation #transform

Live preview Hover

Teeter Soft

Soft teeter-totter on hover.

#hover #animation #transform

Live preview Hover

Teleport Poof

Button puffs out into a smoke ring and reappears with a flash on hover.

#animation #hover #border

Live preview Hover

Teleport Flash

Teleports with flash on hover.

#hover #animation #transform

Live preview Hover

Text 3D Pop

Text pops out in 3D on hover.

#hover #transform #shadow

Live preview Hover

Bounce Letters

Letters bounce up and down on hover.

#hover #animation #transform

Live preview Hover

Text Encrypt

Text scrambles like encryption on hover.

#hover #animation #transform

Live preview Hover

Flip Letters

Letters flip on hover.

#hover #transform #3d

Live preview Hover

Text Flip Up

Text flips upward on hover.

#hover #transform

Live preview Hover

Text Glitch RGB

Text glitches with RGB split on hover.

#hover #animation #transform

Live preview Hover

Jiggle Letters

Letters jiggle on hover.

#hover #animation #transform

Live preview Hover

Text Letter Wave

Letters wave individually on hover.

#hover #transform

Live preview Hover

Marquee Scroll

Text scrolls like a marquee on hover.

#hover #animation #transform

Live preview Hover

Text Mask Reveal

A duplicate gradient-filled text slides up to mask-reveal on hover.

#gradient #hover #transform

Live preview Hover

Pop Letter

Letters pop up sequentially on hover.

#hover #animation #transform

Live preview Hover

Stretch Letters

Letters stretch horizontally on hover.

#hover #transform

Live preview Hover

Text Strike Through

Line strikes through text on hover.

#hover #transform

Live preview Hover

Text Underline Grow

Underline grows from center on hover.

#hover #transform

Live preview Hover

Wave Letters

Letters wave up and down on hover.

#hover #animation #transform

Live preview Hover

Thump Bass

Bass thump impact on hover.

#hover #animation #transform

Live preview Hover

Tick Clock

Steady clock tick on hover.

#hover #animation #transform

Live preview Hover

Tick Metronome

Metronome back-and-forth tick on hover.

#hover #animation #transform

Live preview Hover

Tilt Back 3D

Element tilts back in 3D space on hover.

#hover #transform

Live preview Hover

Tilt Forward 3D

Element tilts forward in 3D space on hover.

#hover #transform

Live preview Hover

Tilt Left

Element tilts to the left on hover.

#hover #transform

Popular tags