Flip

A card rotates 180 degrees around an axis to reveal its back face.

Add a "Card Flip" effect (also called a flip card or card flip 3D) to [where].
When the pointer is over the card, it should turn over around its vertical axis in perspective to show its back face, and turn back when the pointer leaves: smooth and steady.
Hide each face's back side so the two never show through each other, and make the flip work on keyboard focus and with a tap on touch devices.

The element rotates in 3D around its horizontal or vertical axis from edge-on to facing the viewer.

Add a "Flip In" entrance animation (also called flip in X or flip in Y) to [where].
The element should start edge-on and rotate around its horizontal axis to face the viewer, swinging slightly past and back before it settles: quick, with a small wobble.
Give it perspective so the rotation reads as depth, and show it facing forward without motion when the user prefers reduced motion (prefers-reduced-motion).

Letters or words rotate around an axis in 3D to show the next text on their back side.

Add a "Text 3D Flip" hover effect (also called 3D flip text reveal) to [where].
When the pointer is over the text, each letter should roll over on its horizontal axis in 3D to show a new letter on its other side, one after another in a quick, smooth sweep, and roll back when the pointer leaves.
Keep the text box the same size during the flip, and show the same effect on keyboard focus.

The element rotates in 3D until it is edge-on and invisible.

Add a "Flip Out" exit animation (also called flip out X or flip out Y) to [where].
The element should tilt back slightly, then rotate around its vertical axis until it is edge-on and gone: quick and crisp.
Give it perspective so the turn reads as depth, remove the element only after the turn finishes, and hide it instantly when the user prefers reduced motion (prefers-reduced-motion).

The element swings on a top-left hinge, dangles, and then drops off the screen.

Add a "Hinge" exit animation to [where].
The element should swing down from its top-left corner as if a screw came loose, dangle back and forth, then drop off the screen while fading: slow, comic and deliberate.
Let it fall over other content without pushing the layout or adding scrollbars, remove it once it has dropped, and hide it instantly when the user prefers reduced motion (prefers-reduced-motion).