CSS 3D Card Flip Effect

Features

• Flip around Y (horizontal) or X (vertical)
• Adjustable duration and perspective — the smaller the perspective, the more compressed the flip
• Adjustable card size, reflected in the preview at once
• Hover the preview to watch it turn
• The three key properties are annotated in the output, each with why it is required
• Both faces are labelled in the preview, so it is obvious which side you are on
• A `prefers-reduced-motion` fallback is included automatically
• Everything is computed in your browser

How to use

1. Pick the axis: horizontal (rotateY) is the usual choice, vertical (rotateX) suits card lists
2. Adjust the perspective — around 900px reads naturally; below 400 it is obviously exaggerated
3. Set the duration; 400–900ms is comfortable for an interface
4. Hover the preview, then copy the code

FAQ

Why does the flip look squashed instead of turned?

Almost certainly `perspective` is in the wrong place. It must go on the card’s parent (`.flip-scene` in the code), not on the card. On the card, the browser provides no perspective for the transform, so a 90° Y rotation becomes "width compressed to zero" — it looks flattened. It is the most common error with this effect and it is very recognisable: the card collapses to a line mid-flip.

Why can I see mirrored text halfway through?

Because `backface-visibility: hidden` is missing. The two faces overlap at the same position (both `inset: 0`), and without that property an element’s back is rendered as well — past 90° you are looking at the reverse of the back face, i.e. mirrored text. With it, an element facing away is hidden entirely, so exactly one face is visible at any moment. It must be on both faces; one is not enough.

How do I trigger the flip on a touch screen?

`hover` is unreliable on touch (some browsers treat it as "the first tap"). So the output also provides a class toggle: `.flip-card.is-flipped`. Switch that class from JavaScript on click — which also fixes keyboard access (wire the toggle to a button’s click and Enter). For maximum robustness, make it an actual `<button>` element.

How long should the flip take?

400–900ms is typical for an interface. Shorter than 300ms and you cannot see the turn, which feels abrupt; longer than a second and people wait for it. Note also readability: during the flip both faces are skewed and unreadable, so critical information should not exist on only one face — or the user should be able to click to hold a face rather than having to keep hovering.