Card Flip

The element makes a full turn around the Y axis while moving slightly toward the viewer and back.

Add a "Flip" animation to [where].
The element should make one full turn around its vertical axis while coming slightly toward the viewer, then settle back with a tiny dip in size: lively but brief.
Give it perspective so the turn reads as depth, play it once rather than looping, and skip the turn when the user prefers reduced motion (prefers-reduced-motion).

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.

Content sits on the faces of a cube that rotates to show the next face.

Add a "Cube Rotate" transition (also called a 3D cube or cube transition) to [where].
Place the content on the side faces of a cube seen in perspective; each press of next should turn the cube smoothly around its vertical axis to bring the next face to the front.
Keep only the front face reachable by keyboard and screen readers, and use a plain fade for users who prefer reduced motion.

Cards pile with slight offsets and the top card moves away to reveal the next.

Add a "Card Stack" (also called stacked cards) to [where].
Pile the cards with slight offsets behind one another; each press should swing the top card away to the side and tuck it in at the back, while the rest step forward: smooth with a light, quick feel.
Make it work by keyboard, let screen readers reach every card in order, and use a simple fade for users who prefer reduced motion.

A center item faces forward while side items angle away in perspective.

Add a "Coverflow" carousel (also called a cover flow carousel) to [where].
The center item should face forward while the items on each side turn away in perspective; dragging sideways slides the row, and on release it settles smoothly on the nearest item.
Support arrow keys and swipes as well as dragging, and keep vertical page scrolling working on touch devices.