Flip records layout and plays the difference. For a two-sided card, tween rotationY. Use Flip when the page around the card must reflow.

Click, tap or a key. Hover that turns a card is easy to clip as the pointer leaves.

How much copy on the back?

A short extra. If you need a form or a group of links, you wanted a menu or a strip.

What does reduced motion do?

Show the other face with no spin.

Can a grid of these all flip?

They can. If several flip on hover at once, people lose track. One at a time is plenty.

3D card flip

A 3D card flip turns a card around its centre so the reverse can be read, then turns it back.

ScrollBuild difficulty: MediumrotationX

Also called Flip card, Turn card, Two-sided card, Rotate card.

Here it is working.

Move over the card. It leans, then flattens.

For designers

You reach for this when one item has two short faces: a prompt and an answer, a photo and a caption, a price and a footnote. Both sides should be worth the turn. If the extra is a few lines in the same view, Expanding strip or Hoverable list will hurt less. If you have a handful of faces to show at once, you wanted Card fan.

The name collides with GSAP Flip, which records layout. A two-sided card is a rotation. Click, tap or a key should turn it. Hover-only flips are easy to trigger by accident and vanish on touch. Reduced motion can swap the faces with no spin.

Use this when

One item has two short faces, and both are useful.
A press or a key can turn it, not only a pointer.
The back is a destination of its own, not a hidden primary action.
Reduced motion can show the reverse without a rotation.

Reach for something else when

The extra should grow in place on the same face. Use Expanding strip or Hoverable list.
Several cards should spread so all faces show. Use Card fan.
People are browsing many items. Use Infinite draggable grid or Draggable slider.
You need a layout morph, not a two-sided card. Use Flip on Mega menu, Morphing pill menu or Expanding strip.

How to build it

Wrap two faces in a card. Put perspective on the parent. Tween rotationY to 180 to show the back, and back to 0 to show the front. Hide the reverse of each face so you never see a mirrored label. The front and back need a shared size, or the turn will wobble. Keep the card a button if the only job is to turn, or put a button on the face if the card also goes somewhere. Keyboard should match the press. Do not put the only path to a primary action on the reverse. On reduced motion, swap visibility of the two faces with no rotation.

Official GSAP

gsap.quickTo on rotationX and rotationY. Perspective on the parent.

ry((pointerX / width - 0.5) * 14);
rx(-(pointerY / height - 0.5) * 14);

Every plugin ships in the public GSAP package. Nothing here is copied from a paid pack.

Common questions

Is this GSAP Flip?: Flip records layout and plays the difference. For a two-sided card, tween rotationY. Use Flip when the page around the card must reflow.
Hover or click?: Click, tap or a key. Hover that turns a card is easy to clip as the pointer leaves.
How much copy on the back?: A short extra. If you need a form or a group of links, you wanted a menu or a strip.
What does reduced motion do?: Show the other face with no spin.
Can a grid of these all flip?: They can. If several flip on hover at once, people lose track. One at a time is plenty.

Save as skill

A SKILL.md for this one animation: what it is, the official docs link, and a copy-paste block with the reduced-motion branch already in it. Copy gives you the same words.

Use this with your AI

Save the skill, drop it into Cursor, Claude, or whatever you use, and ask for this motion. That is all. The skill tells the agent to open this page, watch the working demo, and match it.

Last reviewed 26 AUG 2026

Next: Text reveal