#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 Loaders

Train Wheel

Steam locomotive wheel with piston rod driving back and forth.

#animation #gradient #transform

Live preview Loaders

Transmission Gear

Multi-speed transmission gears.

#animation #gradient #transform

Live preview Loaders

Trebuchet Arm

Trebuchet arm swinging.

#animation #transform

Live preview Loaders

Tree Grow

Tree growing with leaves unfurling on its branches.

#animation #gradient #transform

Live preview Loaders

Triangle Fuse Burst

Three triangles fusing and bursting outward.

#animation #transform #border

Live preview Loaders

Triangle Ding

Triangle instrument vibrating.

#animation #transform #border

Live preview Loaders

Triangle Spin

Equilateral triangle spinning on its center.

#animation #transform #border

Live preview Loaders

Triple Ring Pulse

Three rings pulsing outward in sequence.

#animation #transform #border

Live preview Loaders

Dump Truck

Dump truck bed tilting to release its load.

#animation #gradient #transform

Live preview Loaders

Tug of War

Rope being pulled back and forth.

#animation #gradient #transform

Live preview Loaders

Tuning Fork Vibrate

Tuning fork vibrating at frequency.

#animation #gradient #transform

Live preview Loaders

Turbine Blade

Turbine blades spinning fast.

#animation #gradient #transform

Live preview Loaders

Steam Turbine

Steam turbine spinning fast.

#animation #gradient #transform

Live preview Loaders

Water Turbine

Water turbine with flowing water.

#animation #gradient #transform

Live preview Loaders

Wind Turbine

Wind turbine with three blades.

#animation #transform

Live preview Loaders

Turkey Feast

Roast turkey with steam.

#animation #gradient #transform

Live preview Loaders

Turtle Walk

Turtle slowly walking with shell bobbing and legs moving.

#animation #gradient #transform

Live preview Loaders

Twin Disc Shift

Twin discs shifting opposite directions.

#animation #gradient #transform

Live preview Loaders

Twin Ellipse Orbit

Two dots orbiting in elliptical paths.

#animation #transform

Live preview Loaders

Typewriter Keys

Typewriter keys stamping down in sequence.

#animation #transform #border

Live preview Loaders

Typhoon

Typhoon with spiral bands.

#animation #gradient #transform

Live preview Loaders

Typing Dots Loader

A chat bubble with three dots that hop in sequence while a reply is composed.

#animation #transform #shadow

Live preview Loaders

Ukulele Strum

Ukulele with strumming motion.

#animation #gradient #transform

Live preview Loaders

Valve Open

Valve opening and closing.

#animation #gradient #transform

Live preview Loaders

Vampire Coffin Rise

Vampire rising from coffin.

#animation #gradient #transform

Live preview Loaders

VHS Tape

VHS tape reels spinning behind a plastic window.

#animation #gradient #transform

Live preview Loaders

Vibraphone Spin

Vibraphone fans spinning above bars.

#animation #gradient #transform

Live preview Loaders

Vinyl Record

Vinyl record spinning under a tonearm needle.

#animation #gradient #transform

Live preview Loaders

Volcano Erupt

Volcano erupting with lava spewing and smoke rising.

#animation #gradient #transform

Live preview Loaders

Volleyball

Volleyball spinning with curved stripe pattern.

#animation #gradient #transform

Live preview Loaders

Wave Bars Loader

Five vertical bars rise and fall like an audio equalizer at even offsets.

#animation #gradient #transform

Live preview Loaders

Waffle Press

Waffle iron pressing.

#animation #gradient #transform

Live preview Loaders

Walkman

Walkman cassette player with a rotating tape reel inside.

#animation #gradient #transform

Live preview Loaders

Warp Drive

Warp drive stretching space around ship.

#animation #transform #border

Live preview Loaders

Water Balloon

Water balloon wobbling.

#animation #gradient #transform

Live preview Loaders

Waterspout

Waterspout rising from water surface.

#animation #gradient #transform

Live preview Loaders

Wave Bars

Six blue bars riding a sinusoidal wave up and down.

#gradient #animation #border

Live preview Loaders

Wave Block Shift

Wave of blocks shifting up and down.

#animation #transform

Live preview Loaders

Weave Shift

Woven strips shifting in opposite directions.

#animation #transform

Live preview Loaders

Werewolf Howl

Werewolf howling at moon.

#animation #gradient #transform

Live preview Loaders

Wheel Spin

Wheel with spokes spinning.

#animation #gradient #transform

Live preview Loaders

Whisk Spin

Kitchen whisk spinning to whip up a swirl of mixture.

#animation #transform #border

Live preview Loaders

White Dwarf

Dense white dwarf star shimmering.

#animation #gradient #transform

Live preview Loaders

Windmill Pinwheel

Four colored blades spinning around a central hub.

#gradient #animation #border

Live preview Loaders

Windmill Blade

Windmill with spinning blades.

#animation #gradient #transform

Live preview Loaders

Window Shutter

Window shutters opening and closing.

#animation #gradient #transform

Live preview Loaders

Windshield Wiper

Windshield wiper swiping back and forth across raindrops.

#animation #gradient #transform

Live preview Loaders

Witch Broom Fly

Witch flying on broomstick.

#animation #gradient #transform

Live preview Loaders

Wood Block Tap

Wood block being tapped.

#animation #gradient #transform

Live preview Loaders

Worm Gear

Worm screw driving a gear.

#animation #gradient #transform

Live preview Loaders

Wormhole

Wormhole tunnel with concentric rings.

#animation #transform #border

Live preview Loaders

Wrench Turn

Wrench tightening a bolt with ratcheting motion.

#animation #gradient #transform

Live preview Loaders

Yo-Yo Spin

Yo-yo spinning on string.

#animation #gradient #transform

Live preview Loaders

Zodiac Wheel

Zodiac wheel rotating with twelve symbols.

#animation #gradient #transform

Live preview Loaders

Zoom Burst Rays

Rays bursting outward from center.

#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 Asterisk Spin Navbar

Nav with spinning asterisk arrow accent on the active item.

#hover #animation #transform

Live preview Navigation

Arrow Bounce Drop Navbar

Nav with arrow indicators that bounce-drop on hover.

#hover #animation #transform

Live preview Navigation

Arrow Chevron Point Navbar

Nav with chevron-pointed active indicators.

#hover #transform

Live preview Navigation

Arrow Cross Mark Navbar

Nav with cross-mark arrow accent on the active item.

#hover #transform

Live preview Navigation

Arrow Diagonal Travel Navbar

Nav links travel diagonally on hover with arrow accents.

#hover #transform

Live preview Navigation

Arrow Flip 3D Navbar

Nav arrow indicators flip in 3D on hover.

#hover #transform #3d

Live preview Navigation

Arrow Floating Bob Navbar

Nav links with floating arrow indicators that bob up and down.

#hover #animation #transform

Live preview Navigation

Arrow Grow Expand Navbar

Nav arrow indicators grow and expand on hover.

#hover #transform

Live preview Navigation

Arrow Heart Beat Navbar

Nav with heart-beat arrow accent on the active item.

#hover #animation #transform

Live preview Navigation

Arrow Outline Draw Navbar

Nav with arrow outline drawn on the active item.

#hover #animation #transform

Live preview Navigation

Arrow Pulse Throb Navbar

Nav arrow indicators pulse and throb on the active item.

#hover #animation #transform

Live preview Navigation

Arrow Rotate Spin Navbar

Nav arrow indicators rotate-spin when hovered.

#hover #transform

Live preview Navigation

Arrow Shrink Compress Navbar

Nav links compress and shrink with arrow accent on hover.

#hover #transform

Live preview Navigation

Arrow Slide Track Navbar

Nav links slide along a track with arrow indicator.

#hover #transform

Live preview Navigation

Arrow Star Burst Navbar

Nav with star-burst arrow accent on the active item.

#hover #transform

Live preview Navigation

Arrow Triple Stack Navbar

Nav with triple-stacked arrow indicators on the active item.

#hover #transform

Live preview Navigation

Arrow Wave Flow Navbar

Nav with wavy arrow flow separators between items.

#hover #animation #transform

Live preview Navigation

Arrow Zigzag Flow Navbar

Nav with zigzag-shaped arrow flow separators.

#hover #animation #transform

Live preview Navigation

Aurora Background Navbar

Navbar with aurora-like animated gradient blobs.

#hover #animation #gradient

Live preview Navigation

Bob Buoyant Navbar

Links bob up and down buoyantly on hover.

#hover #animation #gradient

Live preview Navigation

Fixed Bottom Nav

Fixed bottom navigation bar with icons.

#hover #transform

Live preview Navigation

Gradient Bottom Nav

Bottom nav with gradient active icon.

#hover #gradient #transform

Live preview Navigation

Bounce Drop Navbar

Hovered links drop and bounce in from above with an overshoot.

#hover #transform

Live preview Navigation

Brutalist Navbar

Raw brutalist navbar with thick borders and offset shadow.

#hover #transform #shadow

Live preview Navigation

3D Rotate Hamburger

Hamburger with full 3D rotation on hover.

#hover #transform #border

Live preview Navigation

Bounce Hamburger

Hamburger that bounces on hover.

#hover #animation #transform

Live preview Navigation

Morph to Arrow Hamburger

Hamburger that morphs into a left arrow.

#hover #transform #border

Live preview Navigation

Morph to X Hamburger

Hamburger menu icon that morphs to X on hover.

#hover #transform #border

Live preview Navigation

Rotate Hamburger

Hamburger with rotating lines on hover.

#hover #transform #border

Live preview Navigation

Square Hamburger

Hamburger inside a square that morphs on hover.

#hover #transform #border

Live preview Navigation

To Arrow Hamburger

Hamburger that becomes an arrow on hover.

#hover #transform #border

Live preview Navigation

To Dots Hamburger

Hamburger that becomes 3 vertical dots on hover.

#hover #transform #border

Live preview Navigation

Center Logo Navbar

Navbar with the logo centered and split links.

#hover #transform #border

Popular tags