#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

Bounce Down

Element bounces downward on hover.

#hover #animation #transform

Live preview Hover

Bounce Jelly

Wobbly jelly bounce on hover.

#hover #animation #transform

Live preview Hover

Bounce Left

Element bounces to the left on hover.

#hover #animation #transform

Live preview Hover

Bounce Random

Erratic random bounces on hover.

#hover #animation #transform

Live preview Hover

Bounce Right

Element bounces to the right on hover.

#hover #animation #transform

Live preview Hover

Bounce Rubber

Rubbery stretch bounce on hover.

#hover #transform

Live preview Hover

Bounce Spring

Spring-loaded bounce on hover.

#hover #animation #transform

Live preview Hover

Bounce Up

Element bounces upward in a spring motion on hover.

#hover #animation #transform

Live preview Hover

Bow Down

Element bows down on hover.

#hover #transform

Live preview Hover

Deep Breathe

Deep breathing scale on hover.

#hover #animation #transform

Live preview Hover

Breathe Scale

Element breathes in and out on hover.

#hover #animation #transform

Live preview Hover

Soft Breathe

Soft breathing animation on hover.

#hover #animation #transform

Live preview Hover

Bubbles Float

Floating bubbles rise on hover.

#hover #animation #gradient

Live preview Hover

Bubbles Rise

Bubbles rise upward on hover.

#hover #animation #gradient

Live preview Hover

Bulge Bubble

Bulges into a bubble on hover.

#hover #transform

Live preview Hover

Bungee Drop

Bungee-cord drop animation on hover.

#hover #animation #transform

Live preview Hover

Cartwheel Left

Element cartwheels to the left on hover.

#hover #transform

Live preview Hover

Cartwheel Right

Element cartwheels to the right on hover.

#hover #transform

Live preview Hover

Hue Cycle Fast

Rapidly cycles through hue rotation on hover.

#hover #animation #transform

Live preview Hover

Hue Cycle Medium

Medium speed hue rotation cycle on hover.

#hover #animation #transform

Live preview Hover

Hue Cycle Slow

Slow hypnotic hue rotation cycle on hover.

#hover #animation #transform

Live preview Hover

Opal Iridescent

Opal iridescent rainbow shimmer on hover.

#hover #animation #gradient

Live preview Hover

Color Pop Splash

Vivid color splashes across element on hover.

#hover #transform #filter

Live preview Hover

Vibrant Pop

Vibrant colors pop with extreme saturation on hover.

#hover #transform #filter

Live preview Hover

Confetti Burst

Confetti bursts outward on hover.

#hover #animation #transform

Live preview Hover

Confetti Scatter

Confetti scatters outward on hover.

#hover #animation #transform

Live preview Hover

Corner Border Draw

Four accent corner brackets draw inward on hover, framing the content.

#hover #border #transform

Live preview Hover

Cube Rotate 3D

Element rotates like a cube face on hover.

#hover #transform #3d

Live preview Hover

Curtain Rise

Curtain rises to reveal content on hover.

#hover #gradient #transform

Live preview Hover

Depth Pop

Element pops forward in 3D depth on hover.

#hover #transform

Live preview Hover

Desaturate Drain

Color drains away to grayscale on hover.

#hover #gradient #transform

Live preview Hover

Drift Slow

Slow ambient drift on hover.

#hover #animation #transform

Live preview Hover

Duotone Cyan Magenta

Cyan/magenta neon duotone split on hover.

#hover #transform

Live preview Hover

Dust Puff

Dust puffs outward on hover.

#hover #transform #filter

Live preview Hover

Flame Bottom Edge

Bottom edge ignites with animated flame gradient on hover.

#hover #animation #gradient

Live preview Hover

Elastic Stretch

Element stretches and snaps back elastically on hover.

#hover #transform

Live preview Hover

Embers Rise

Glowing embers rise on hover.

#hover #animation #transform

Live preview Hover

Evaporate Up

Content floats upward with a vertical blur as if evaporating on hover.

#gradient #hover #border

Live preview Hover

Explode Out

Explodes outward on hover.

#hover #animation #transform

Live preview Hover

Fade In Rotate

Rotating fade-in on hover.

#hover #transform

Live preview Hover

Fade In Slide

Sliding fade-in on hover.

#hover #transform

Live preview Hover

Fade & Slide Up

Default label fades up and out while a new label fades up into place on hover.

#hover #border #transform

Live preview Hover

Firework Burst

Firework bursts from center on hover.

#hover #animation #transform

Live preview Hover

Flip 3D Card

Card-style 3D flip on hover.

#hover #transform #border

Live preview Hover

Soft 3D Flip

Soft 3D flip on Y-axis on hover.

#hover #transform #3d

Live preview Hover

Flip Coin

Element flips like a spinning coin on hover.

#hover #gradient #transform

Live preview Hover

Flip Diagonal

Element flips diagonally on hover.

#hover #transform #3d

Live preview Hover

Soft Diagonal Flip

Soft diagonal flip transform on hover.

#hover #transform #3d

Live preview Hover

Flip X Fast

Quick X flip on hover.

#hover #transform #3d

Live preview Hover

Flip X Hard

Hard full X flip on hover.

#hover #transform #3d

Live preview Hover

Flip X Slow

Slow dramatic X flip on hover.

#hover #transform #3d

Live preview Hover

Flip X Soft

Soft gentle X flip on hover.

#hover #transform #3d

Live preview Hover

Flip Y Hard

Hard full Y flip on hover.

#hover #transform #3d

Live preview Hover

Flip Y Slow

Slow dramatic Y flip on hover.

#hover #transform #3d

Live preview Hover

Flip Y Soft

Soft gentle Y flip on hover.

#hover #transform #3d

Live preview Hover

Flip Zoom

Flip with zoom on hover.

#hover #transform #3d

Live preview Hover

Float Rise

Element floats upward and stays on hover.

#hover #transform

Live preview Hover

Fold Down

Folds downward on hover.

#hover #transform #3d

Live preview Hover

Fold Left

Folds to the left on hover.

#hover #transform #3d

Live preview Hover

Fold Origami Spread

Origami spread fold on hover.

#hover #transform #3d

Live preview Hover

Fold Right

Folds to the right on hover.

#hover #transform #3d

Live preview Hover

3D Tilt Edge Frame

Frame tilts in 3D while edges highlight on hover.

#hover #transform #shadow

Live preview Hover

Bracket Loosen

Inner brackets loosen outward to release the element on hover.

#hover #transform #border

Live preview Hover

Bracket Snap

Two L-brackets snap together to form a frame on hover.

#hover #transform #border

Live preview Hover

Bracket Tighten

Outer brackets tighten inward to grip the element on hover.

#hover #transform #border

Live preview Hover

Cassette Flap Frame

Top flap opens like a cassette tape on hover.

#hover #transform #border

Live preview Hover

Chevron Trace Frame

Chevron pattern traces the border on hover.

#hover #gradient #transform

Live preview Hover

Double Trace Frame

Two borders trace around the element on hover.

#hover #transform #border

Live preview Hover

Fold Out Frame

Frame panels fold outward like opening a box on hover.

#hover #transform #shadow

Live preview Hover

Mirror Half Frame

Frame halves slide in from top and bottom mirror on hover.

#hover #transform

Live preview Hover

Outset Bevel Frame

Outset beveled frame lifts the element on hover.

#hover #transform #shadow

Live preview Hover

Photo Corners

Photo-album corner mounts appear on the four corners on hover.

#hover #transform

Live preview Hover

Polaroid Fold Frame

Polaroid-style frame with thick bottom border lifts on hover.

#hover #transform #shadow

Live preview Hover

Ribbon Trace Frame

Ribbon-like band traces around the border on hover.

#hover #animation #gradient

Live preview Hover

Rotate Square Frame

Outer square frame rotates around the element on hover.

#hover #animation #transform

Live preview Hover

Scale Edge Frame

Border scales from outside inward to frame the element on hover.

#hover #transform #border

Live preview Hover

Split Half Frame

Frame splits vertically and retracts to sides on hover.

#hover #transform

Live preview Hover

Tab Fold Frame

Top tab folds down to form a header on hover.

#hover #transform

Live preview Hover

Tape Peel Frame

Tape strip peels away revealing the border on hover.

#hover #transform

Live preview Hover

Tick Tack Frame

Border ticks alternate like a tick-tack animation on hover.

#hover #transform

Live preview Hover

Twist Corner Frame

Corners twist into place with 3D rotation on hover.

#hover #transform #border

Live preview Hover

Gleam Cross

Cross gleam flashes on hover.

#hover #transform

Live preview Hover

Glitch Slice

Element slices with glitch effect on hover.

#hover #animation #transform

Live preview Hover

Glow Aura Orb

Expanding aura orb radiates on hover.

#hover #gradient #transform

Live preview Hover

Glow Gleam Sweep

Bright gleam sweeps across on hover.

#hover #gradient #transform

Live preview Hover

Glow Halo Disc

Floating halo disc forms above on hover.

#hover #gradient #transform

Live preview Hover

Glow Shimmer Wave

Shimmer wave of light on hover.

#hover #gradient #transform

Live preview Hover

Gold Sheen Sweep

Metallic gold sheen sweeps diagonally on hover.

#hover #gradient #transform

Live preview Hover

Gradient Sweep

A diagonal gradient band sweeps across the button on hover.

#gradient #hover #border

Live preview Hover

Grain Texture Reveal

A subtle film-grain noise texture fades in over the panel on hover.

#hover #border #transform

Live preview Hover

Grayscale Full

Complete grayscale conversion on hover.

#hover #gradient #transform

Live preview Hover

Green Shift

Hue rotates to green on hover.

#hover #transform #filter

Live preview Hover

Grow Clear

Element grows from blurred to clear on hover.

#hover #transform #filter

Live preview Hover

Handstand

Element flips upside down on hover.

#hover #transform

Live preview Hover

Has-Selector Sibling Dim

Hovering one row dims every other row, because :has() lifts the state to the list.

#hover #filter #transform

Live preview Hover

Heartbeat Pulse

Element pulses like a heartbeat on hover.

#hover #animation #transform

Effects tagged #transform

Popular tags