AI CSS Animations

CSS 3D Text Effects

29 3D text effects in CSS: extruded and long-shadow text, rotating and flipping letters, folding titles and perspective effects.

Flip In

The line swings down into place from a 90-degree tilt, with perspective. Set the transform origin to the top so it hinges like a sign being lowered.

reveal · one-shot · 3d

Breathing Long Shadow

A stacked, stepped shadow gives the text a chunky 3D look, and the shadow slowly extends and retracts as if the light were moving. Retro poster energy.

loop · 3d · retro

Embossed Text Effect

Raised letters with a lit edge and a shadowed edge, and the light slowly circles around them. Two text-shadows swap sides through eight keyframes, so the bevel turns smoothly.

loop · 3d · subtle

Split Flap Rotating Text

A departures board tile that flips to the next word: the top half falls forward, the bottom half lands with a little bounce. Each half is a clipped copy of the word read from data-text.

loop · words · 3d · retro

3D Flip Card Rotating Text

The word sits on a card that flips over on its vertical axis to show the next word on its back, settling with a slight overshoot. Every word is one face with backface-visibility hidden.

loop · words · 3d

Picker Wheel Rotating Text

Words ride a 3D wheel like an iOS picker: the chosen one faces you in a tinted band while its neighbors tilt away above and below. Six faces set 60 degrees apart make one full turn.

loop · words · 3d

Flipping Letters Animation

Letters spin a full turn on their vertical axis one after another, like coins flipped down a row, then rest. Each letter carries its own perspective() so the flip has depth without a wrapper.

loop · letters · 3d

Accordion Text Animation

The word squeezes in like an accordion: letters slide toward the middle and fold into alternating pleats, one shade lighter on every other fold, then stretch back out flat.

loop · letters · 3d

Stacked Outline Text

Four outlined copies stack into a 3D extrusion and a fill runs back through them layer by layer, then drains the same way. Grid-stacked spans, each offset and delayed by its --i.

stroke · loop · 3d

Flip Clock Animation

A flip clock whose seconds cards fold down every second, top half falling to reveal the next digit. The digits come from a registered integer and a cyclic @counter-style, so 9 wraps to 0.

numbers · 3d · loop

Calendar Date Flip Animation

A tear-off desk calendar: every page lifts off the top and flips away, uncovering the next date and weekday. Day and weekday are counters over one integer, each with its own cyclic @counter-style.

numbers · 3d · loop

3D Extruded Text Effect

Heavy block letters with visible depth tilt slowly left and right in 3D, and the extruded side swings to follow the tilt. The depth is ten stacked text-shadow layers in darker accent shades.

3d · loop

3D Spinning Text

The word spins a full turn on its vertical axis, slowing at the front and at the back so both faces stay readable. The back face is a darker copy, and a floor shadow narrows as it turns edge-on.

3d · loop

3D Text Cube Rotation

Two words sit on the faces of a 3D box that rolls a quarter turn upward, holds, then rolls again with a springy settle. Four faces placed with rotateX and translateZ inside a preserve-3d box.

3d · words · loop

Folding Paper Text

A paper label folds its top half down over the bottom half, holds, then opens again, shading as it turns. The flap is a preserve-3d pair: the printed front half and a plain back.

3d · loop

3D Rotating Text Cylinder

Letters wrap around an invisible 3D drum that turns slowly, with the far side showing through faintly in mirror image. Each letter is turned around the Y axis and pushed out with translateZ.

3d · letters · loop

Star Wars Text Crawl

Story text scrolls up a tilted plane and shrinks toward a vanishing point, like a space opera's opening crawl. A rotateX plane inside a perspective box, faded out at the far end with a mask.

3d · cinematic · loop

Shattering Text Effect

The word cracks into seven shards that fly apart in 3D, drift, then snap back together into solid text. Each shard is a copy of the word cut out with a clip-path polygon and moved with translate3d.

3d · cinematic · loop

Zoom Through Text

Words fly out of the distance, hold for a beat, then rush past the camera as the next one arrives. Each word travels along the Z axis inside a perspective box, staggered by a delay.

3d · words · cinematic · loop

Layered 3D Text Effect

Five copies of the word at different depths, each shifted in hue, sway in 3D so the layers fan apart like a paper cut. Two nested rotations on different timings trace a smooth figure eight.

3d · colorful · loop

Isometric 3D Text

Flat isometric lettering rises off the floor into solid blocks, holds, then sinks back down. Twelve stacked copies move up the Z axis by their index, so the extrusion grows as one piece.

3d · loop

3D Book Opening Text

A closed book swings its cover open on the spine to show the first line inside, holds, then closes again. The cover is a two-sided preserve-3d panel, and the book slides over to stay centered.

3d · loop

Spin In Text with Motion Blur

The title spins in on its vertical axis for three turns, blurred at speed and sharpening as it slows to a stop facing you. Plays once: rotateY, scale and blur on one long ease-out.

3d · blur · one-shot

3D Parallax Title Card

A title card tilts slowly in 3D while its eyebrow, headline and tagline float at different depths, so they slide past each other in parallax. Each line sits at its own translateZ inside the card.

3d · cinematic · loop

Pop Out 3D Text

The word lifts off the page toward you with a slight tilt while its shadow stays behind, spreading and softening, then settles back with a small bounce. translateZ in a perspective box.

3d · loop

Moving Light Shadow Text

A small light swings in an arc above the word and its soft shadow slides the other way, short when the light is overhead and long when it is low. Light and shadow share one alternating clock.

3d · subtle · loop

Anamorphic 3D Text Illusion

Letters float at very different depths and only line up into a word from one angle. The view swings through that angle, so the word forms and scatters again. Each letter is scaled to cancel its depth.

3d · letters · loop

Twisting Text Effect

The word is sliced into eight bands that each spin a full turn a moment after the one above, so it twists like a ribbon before settling flat. The bands are clip-path slices of the same text.

3d · loop

Hanging Sign Swing Text

An OPEN sign hangs from a nail on two strings and swings toward you and away in 3D. A rotateX pendulum pivoting on the nail, with perspective so the bottom edge grows as it comes near.

3d · playful · loop

How to use these 3d text effects

Open any effect, copy the HTML into your markup and the CSS into your stylesheet. Nothing else is required. Classes are prefixed per effect so several can share a page.

To change the color, set --txt-color on the element or any ancestor. To change the size, set --txt-size: offsets, shadows and letter spacing are all in em, so they follow the font size.

One-shot effects such as the typewriter and the reveals play when the element appears. To trigger them later, add the class when you need it, or toggle animation-play-state.

Every snippet ships with a prefers-reduced-motion rule that jumps straight to the finished state for people who asked their OS for less motion, so the text is always readable.