Flip animation

Rotate a card to reveal its opposite face.

Live preview Try the effect

MOTION PREVIEW

240ms · ease-out

This demo explains the pattern. Adapt the styling and dimensions to your project.

What it is

Rotate a card to reveal its opposite face. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.

When to use

Paired information that benefits from a front and back.

Related concepts

A flip uses rotation and perspective rather than a simple content replacement.

Describe this effect

Output language

Rotate the card around its vertical axis to reveal the back, with a clear control to return to the front. Use a 240ms ease-out transition. Show the final state immediately when reduced motion is requested.

Generated from the parameters · Add to a plan to edit

References

Specification and implementation reference

Definitions are editorial. Common and descriptive names are not necessarily standardized terms.