Card Flip CSS — 3D Flip Card Effect Tutorial & Generator

How the CSS Card Flip Effect Works

1. Perspective: creating 3D space

The perspective property on the flip card container defines how far the viewer is from the 3D plane. Lower values (300–500px) create dramatic, exaggerated 3D card rotations. Higher values (1000–2000px) make the flip animation look flatter and more subtle. Around 800px is a natural sweet spot for most card flip effects.

2. rotateY / rotateX: the flip direction

rotateY(-180deg) flips the card horizontally, the classic card flip CSS effect. rotateX(-180deg) flips it vertically (like a calendar). The negative value determines the flip direction; positive values rotate the 3D card the other way.

3. backface-visibility: hidden

Without backface-visibility: hidden, both sides of the flip card are visible at all times; the back shows through as a mirrored image. Setting it to hidden makes each face invisible when rotated past 90 degrees, creating the clean card flip animation effect.

4. transform-style: preserve-3d

Applied to the inner wrapper, transform-style: preserve-3d tells the browser that child elements should be positioned in 3D space rather than flattened into a 2D plane. Without this, both faces of the 3D flip card collapse into the same plane and the card flip animation breaks. Supported in all modern browsers.

5. Easing for natural motion

A simple ease or cubic-bezier(.4,0,.2,1) on the transition gives the flip card animation a natural acceleration/deceleration curve. The 3D card speeds up as it starts rotating and slows down as it lands, creating a satisfying flip card effect.

6. Flip from the edge: book-open variation

By default the card rotates around its center axis. Changing transform-origin: center right (or left) shifts the pivot point to the edge of the card, so it opens like a book page rather than spinning in place. Combined with translateX(-100%), this creates a slide-flip where the card physically moves as it turns. For a full demo and code — including a WebGL version with realistic paper curl — see the Page Flip Effect page.

Common CSS Card Flip Problems (and How to Fix Them)

Most card flip bugs come down to a handful of CSS rules that silently break 3D context. Here are the most common ones.

1. The back face is visible through the front

You're missing backface-visibility: hidden on one or both faces — or Safari is ignoring it. Always add the -webkit- prefix:

.flip-card-front,
.flip-card-back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden; /* required for Safari */
}

2. The flip animation is flat — no 3D depth

transform-style: preserve-3d only applies one level deep. Any ancestor with overflow: hidden, opacity (less than 1), filter, will-change: transform, or transform on it will flatten the 3D context entirely. Check every parent element between your card and the page root.

/* These all silently kill preserve-3d on children: */
.parent { overflow: hidden; }   /* flattens 3D */
.parent { opacity: 0.99; }      /* flattens 3D */
.parent { filter: blur(0px); }  /* flattens 3D */
.parent { will-change: transform; } /* flattens 3D */

3. Card flip on click not working

The :hover selector doesn't work on touch devices and can't be toggled programmatically. For card flip on click, toggle a class with JavaScript instead:

/* CSS */
.flip-card.flipped .flip-card-inner {
  transform: rotateY(-180deg);
}

// JS
document.querySelector('.flip-card').addEventListener('click', function () {
  this.classList.toggle('flipped');
});

4. Card flips the wrong way

The back face needs a pre-applied rotateY(180deg) so it starts facing away. Without it both faces point the same direction and the back is never visible. The sign of the hover transform controls the flip direction — -180deg goes right-to-left, +180deg goes left-to-right.

5. Perspective applied to the wrong element

perspective must sit on the parent of the element being transformed, not on the element itself. Setting it on .flip-card-inner has no effect on its own 3D rotation. Set it on .flip-card (the container).

When to Use a Card Flip Effect

FAQ