Free · Fast · Privacy-first

CSS Card Flip Animation

A CSS card flip animation rotates a card 180 degrees around its Y axis to reveal a back face, like flipping a physical card.

⚡

Full 4-rule CSS setup: container, wrapper, front face, back face

🔒

Configurable perspective depth and flip duration

✨

backface-visibility: hidden on both faces for clean flip

⚡

Click-triggered and hover-triggered flip options

Cost: Free forever
Sign-up: Not required
Processing: In your browser
Privacy: Files stay local

FreeNo signupWhite-label

Add this Transform Gen to your website

Drop the Transform Gen into any page — blog post, product docs, intranet, school portal — with a single line of HTML. Your visitors get the full tool, processed entirely in their browser. No backend, no uploads, no signup.

Files stay 100% in the visitor's browser
Responsive — adapts to any container width
Free forever, no API key needed

Embed code

<iframe
  src="https://www.fixtools.io/css-tool/transform-gen?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Transform Gen by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

<iframe
  src="https://www.fixtools.io/css-tool/transform-gen?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Transform Gen by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

Attribution-friendly: a small "Powered by FixTools" link appears in the embed footer.

The Four CSS Rules Required for a 3D Card Flip and How Each One Works

The outer container receives the perspective property. This is not the card itself but the element that wraps it. perspective: 800px on the container places the viewer 800 pixels from the 3D scene. Without this, all 3D rotation appears flat because orthographic projection is used by default. The perspective value is placed on the container rather than the card so that if multiple cards are present they share the same vanishing point and appear to exist in the same 3D space. A perspective between 600px and 1000px produces a natural-looking flip for cards between 200px and 400px wide. Smaller perspective values produce more dramatic depth distortion.

The card wrapper element receives transform-style: preserve-3d and transition: transform 600ms ease. The preserve-3d value tells the browser to render the front and back face children in actual 3D space rather than flattening them to 2D. Without this, both faces stack flat on top of each other and the flip just swaps one flat face for another without any 3D rotation. The transition duration controls how long the flip takes. Values between 400ms and 700ms produce a flip that reads as physical and deliberate. Faster flips below 300ms can feel too mechanical; slower flips above 900ms can feel sluggish for interactive UI.

The front and back face elements both receive position: absolute and width: 100%; height: 100% to overlay each other exactly. Both receive backface-visibility: hidden, which makes each face invisible when it is rotated more than 90 degrees away from the viewer. Without this, both faces would be simultaneously visible as mirror images showing through the card at 90-degree angles during the rotation, creating a transparent ghost effect. The back face gets an initial transform: rotateY(180deg) to start it face-down. When the flip is triggered, the card wrapper receives transform: rotateY(180deg), which rotates the entire assembly 180 degrees. The front face rotates from 0 to 180 degrees and disappears at 90 degrees. The back face rotates from 180 to 360 degrees and becomes visible after 90 degrees.

Card flip animations expose every cross-engine difference in 3D rendering. Chrome and Edge handle preserve-3d cleanly and produce identical results across versions. Firefox renders the flip correctly but applies slightly different antialiasing on the rotating faces, which can show as a brief edge softening at the 90-degree midpoint. Safari historically required -webkit- prefixes for transform-style and backface-visibility and still benefits from them on iOS devices below version 15. The most common failure mode is an intermediate element with opacity below 1, a filter, or overflow: hidden between the preserve-3d container and the face children. Any of these properties forces a flattening side effect that breaks the 3D rendering even when preserve-3d is declared. Test the flip in all three engines and remove any grouping properties from intermediate ancestors.

MDN: backface-visibility MDN: transform-style

How to use this tool

💡

Set the card width and height, choose the flip trigger (hover or click), set the perspective value on the container, and adjust the transition duration. The generator produces all four CSS rules. Preview the flip animation in the canvas. Copy the complete CSS and optionally copy the minimal HTML structure.

How It Works

Step-by-step guide to css card flip animation:

1
Set card dimensions and perspective
Enter the card width and height. Set the container perspective value. The generator places the perspective on the outer container and sets up the card wrapper with preserve-3d.
2
Choose the flip trigger
Select hover for a CSS-only flip activated on :hover, or click for a class-toggle flip that requires a JavaScript toggle. The generator includes the trigger selector in the output.
3
Set transition duration
Adjust the flip duration slider. Values between 400ms and 700ms feel physical. Choose ease or ease-in-out for smooth acceleration and deceleration.
4
Copy the full CSS and HTML structure
Click Copy Code to export all four CSS rules. Optionally copy the minimal HTML structure showing the container, wrapper, front face, and back face elements.

Real-world examples

Common situations where this approach makes a real difference:

Service card revealing pricing on flip

A SaaS pricing page uses cards that show a service name and icon on the front and pricing details on the back. Clicking a card triggers the flip. The developer uses the generator to produce the four-rule CSS with perspective: 800px, transition: 500ms ease, and a .flipped toggle class. A JavaScript click listener on each card toggles the class. backface-visibility: hidden ensures only one face is visible at a time. The effect communicates that more information exists behind each card.

Language learning flashcard app

A vocabulary app shows a word in English on the front face and the translation on the back. The card flips on click to reveal the answer. The generator produces the CSS setup with a hover trigger replaced by a click-toggle class. The front face has a light background and the back face has a contrasting color. The perspective is set to 700px for a card size of 300px by 180px, producing natural depth.

Team member card with bio on back

An about page has team photos on card fronts and short bios on card backs. Hovering any card triggers the flip. The generator produces the :hover trigger form: .card-wrapper:hover { transform: rotateY(180deg); }. The transition is 600ms ease with perspective: 900px on the grid container. All twelve cards share the same CSS class, so the complete flip setup requires only four CSS rules regardless of the number of cards.

Interactive quiz answer reveal

A quiz interface shows a question on the card front. Clicking reveals the answer on the back. The developer uses the generator to produce a click-toggle flip with a longer transition of 700ms ease-in-out to give the reveal a deliberate paced feel. The back face includes a large answer text and a "Next" button. backface-visibility: hidden ensures the answer is completely hidden before the flip begins, preserving the quiz format.

Pro tips

Get better results with these expert suggestions:

Use JavaScript toggle class for click-triggered flips

For click-triggered flips, add a JavaScript click listener that toggles a .flipped class on the card wrapper. The .flipped class adds transform: rotateY(180deg). The base wrapper has no transform or transform: rotateY(0deg) and has the transition. This pattern is more reliable than using the :focus or :active pseudo-classes, which behave inconsistently across browsers for mouse events on non-button elements.

Set overflow: hidden on the container to contain the flip within its bounds

During the flip animation, the card extends slightly beyond its original boundary due to perspective projection. Setting overflow: hidden on the container prevents the rotating card from visually overlapping adjacent elements at the midpoint of the animation. This is especially important in tight grids where cards are close together.

Use rotateX(180deg) for a vertical flip around the horizontal axis

A top-to-bottom flip instead of left-to-right uses the same four-rule structure but replaces all rotateY values with rotateX values. The back face gets an initial transform: rotateX(180deg). The .flipped card wrapper gets transform: rotateX(180deg). The perspective on the container remains the same. The flip appears to tumble forward like a page turn rather than spin on a vertical axis.

Flip multiple cards with staggered delays for a deck reveal

To flip a row of cards sequentially, keep all CSS rules identical and control the flip timing with JavaScript. Apply the .flipped class to each card with a setTimeout delay of 100ms to 150ms between cards. The CSS transition handles the animation for each card individually. The stagger creates a wave of flipping that reveals the back faces of all cards in sequence without any CSS animation complexity.

Set backface-visibility on both faces, not just the back

Forgetting to set backface-visibility: hidden on the front face causes it to remain visible as a mirror image from behind when the card is fully flipped to show the back. Both the front and back face elements need backface-visibility: hidden for the flip to look like a solid physical card without any see-through artifacts.

Give the card wrapper a fixed height

With position: absolute on both face elements, the card wrapper has no height from its children. Set an explicit height on the card wrapper equal to the desired card height. Without it the wrapper collapses to zero height and neither face is visible. Width can also collapse if the wrapper is not a block element with explicit dimensions.

Add -webkit- prefix for older Safari support

Safari on older iOS versions requires -webkit-transform-style: preserve-3d and -webkit-backface-visibility: hidden. Current Safari 15 and later supports the unprefixed forms. For projects that need to support iOS 13 and 14 devices, include both prefixed and unprefixed declarations for transform-style and backface-visibility.

FAQ

Frequently asked questions

Four declarations are essential. First, perspective on the outer container, typically 600px to 1000px. Second, transform-style: preserve-3d on the card wrapper so child faces share 3D space. Third, backface-visibility: hidden on both the front and back face elements so each face is invisible when rotated away from the viewer. Fourth, transform: rotateY(180deg) on the back face as its initial state, and the same value applied to the card wrapper when the flip is triggered.

Each face element has two sides: the front and the back. Without backface-visibility: hidden, when a face rotates more than 90 degrees away from the viewer its back side becomes visible as a mirror image. If only the back face has this property, the front face will show through as a ghost when the card is fully flipped. Setting backface-visibility: hidden on both faces ensures each face disappears completely when it faces away from the viewer, making the card appear solid.

The most common cause is a missing perspective value on the container, or missing transform-style: preserve-3d on the card wrapper. Without perspective, the browser uses orthographic projection and the rotation appears as a flat scale-down and scale-up rather than a 3D rotation. Without preserve-3d, the face elements are flattened to 2D before compositing and do not participate in shared 3D space. Verify both properties are present and correctly applied.

Yes. Replace all rotateY values with rotateX values throughout the CSS. The back face initial transform becomes rotateX(180deg) instead of rotateY(180deg). The flip trigger applies rotateX(180deg) to the card wrapper. The perspective on the container remains unchanged. The resulting animation tumbles the card forward around the horizontal axis, like turning a page downward rather than spinning it sideways.

Remove the :hover selector from the card wrapper rule and create a .flipped class that applies transform: rotateY(180deg) to the card wrapper. Add a JavaScript click event listener to the card wrapper that calls element.classList.toggle('flipped'). The transition on the base card wrapper handles the animation in both directions. This pattern works reliably across all browsers and input methods including touch screens.

Yes, with some considerations. Hover-triggered flips do not work on touch devices because there is no hover state on touchscreens. Use the click-toggle class pattern for mobile compatibility. The 3D transform and backface-visibility properties are supported in all modern mobile browsers. Safari on iOS requires -webkit-transform-style: preserve-3d and -webkit-backface-visibility: hidden for iOS 13 and 14 compatibility.

For cards between 200px and 400px wide, perspective values between 600px and 1000px produce natural-looking flips. A value of 800px is a good starting point. Smaller values like 300px produce exaggerated foreshortening where the card appears to distort heavily during rotation. Larger values like 1500px reduce the depth effect to the point where the flip looks almost flat. Scale the perspective proportionally to the card size: roughly three to four times the card width.

A two-sided card flip naturally handles only front and back. For more faces, the same preserve-3d and perspective setup is used, but additional face elements are positioned at different rotateY angles. A three-face object uses rotateY(0deg), rotateY(120deg), and rotateY(240deg) for equal spacing. Animating the wrapper through these angles in sequence reveals each face. This is essentially a simplified 3D carousel. The complexity increases but the underlying CSS technique is the same.

Wrap the transition on the card wrapper in @media (prefers-reduced-motion: no-preference) so the 180-degree rotation only animates for users who have not requested reduced motion. For users who have, swap the card content with an instant state change or an opacity crossfade between the front and back faces instead of a 3D rotation. Card flips are among the most disorienting motion patterns for vestibular-sensitive users because the apparent geometry changes continuously through the rotation. A static reveal preserves the affordance without the motion. The media query approach is supported in every modern browser and requires no JavaScript.

A card wrapper with transform-style: preserve-3d creates a 3D rendering context where children are stacked by their computed Z position rather than by z-index alone. A button or label inside the front face with a high z-index can still render behind another element that sits at a closer Z depth, even if that element has a lower z-index. The fix is to keep all interactive elements at the same Z depth and let z-index resolve the order between them, or to portal floating descendants like dropdowns and tooltips to document.body so they live outside the preserve-3d context entirely. Avoid mixing high z-index values with translateZ on the same children.