GODRICH
#css-animation#button#loader#transition#scroll#dashboard#ui#design-trends

9 CSS Card Flip Animations (Copy-Paste, 20 Lines)

· Godrich · 9 items · 17 min read

FeedbackCSS onlyReactHoverClickCheckout

A CSS card flip animation spins a card around its own center to reveal different content on the back, built with 3D transforms instead of any JavaScript

Flip on Y01 flip-y-hover Flip on X (click)02 flip-x-click Fold in half03 fold-half Unfold a letter04 unfold-letter Shuffle a stack05 flip-stack-shuffle Page turn06 flip-book-page Reveal price card07 flip-reveal-price Four-face cube08 flip-cube-4-faces Reduced-motion variant09 flip-reduced-motion

Auto-plays · click a tile to jump to its section · all nine in one zip

The order below runs from the simplest trigger to the most involved one, then closes on accessibility. It opens with a plain hover flip (01) and its click-triggered twin (02), moves through two paper-fold ideas that swap rotateY for rotateX (03 and 04), continues through patterns built around more than one card — a shuffling stack (05), a page turn (06), a pricing variant of the very first flip (07), and a four-face cube that needs real click state (08) — and ends on 09, which plays back that same flip the way a visitor with reduced motion turned on actually experiences it.

01Flip on Y

css flip card on hover, in one rule

Hovering the card spins it 180 degrees around a vertical axis so the back comes into view — nothing gets clicked, the card just turns to face away from the cursor.

Flip on Y
Open in a new tab

01 · Flip on Y — Measured area 13.071% · moving frames 7/23Original by GODRICH · SCSS and React ship in the zip · See the password

rotateYperspectivebackface-visibility

How the two faces stay hidden

A perspective wrapper holds an inner layer that rotates, and both faces hide their own reverse side so the two never show through each other mid-turn.

.fy-card { perspective: 700px; }
.fy-card__inner {
  transform-style: preserve-3d;
  transition: transform $duration $easing;
}
.fy-card:hover .fy-card__inner { transform: rotateY(180deg); }
.fy-card__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}
.fy-card__face--back { transform: rotateY(180deg); }

02Flip on X (click)

css card flip on click, and why not hover

Clicking the card flips it top-to-bottom instead of side-to-side, and the flipped state sticks after the click — useful because hover never fires on a touchscreen, so this version needs an actual tap to work everywhere.

Flip on X (click)
Open in a new tab

02 · Flip on X (click) — Measured area 12.343% · moving frames 8/23Original by GODRICH · SCSS and React ship in the zip · See the password

rotateXaria-pressedJS 6줄

Six lines of state

Six lines of script toggle aria-pressed and a class on every click, since CSS alone can't remember which face was last shown.

var btn = document.querySelector(".fx-card");
btn.addEventListener("click", function () {
  var open = btn.getAttribute("aria-pressed") === "true";
  btn.setAttribute("aria-pressed", String(!open));
  btn.classList.toggle("is-flipped", !open);
});

03Fold in half

Only the right half swings

Instead of turning the whole card over, only the right half rotates: it swings shut on a hinge planted at the card's own center line, so the card folds shut like a piece of paper, rather than spinning in place.

Fold in half
Open in a new tab

03 · Fold in half — Measured area 13.074% · moving frames 19/23Original by GODRICH · SCSS and React ship in the zip · See the password

preserve-3drotateYtransform-origin

The spine that never moves

The left half never moves — it's the fixed spine the right half folds against.

.fh-half--fold {
  transform-style: preserve-3d;
  transform-origin: left center;
  transition: transform $duration $easing;
}
@keyframes fh-fold {
  0%   { transform: rotateY(0); }
  50%  { transform: rotateY(-172deg); }
  100% { transform: rotateY(0); }
}

04Unfold a letter

Two flaps, two hinges

A folded card opens like a letter: the top half swings up and the bottom half swings down, each hinged at its own outer edge.

Unfold a letter
Open in a new tab

04 · Unfold a letter — Measured area 26.174% · moving frames 11/23Original by GODRICH · SCSS and React ship in the zip · See the password

rotateXtransition-delaytransform-origin: top

Why the bottom waits

The bottom flap's motion doesn't start until the top flap is already most of the way open, so the two edges read as two separate steps instead of one symmetric spread.

.ul-flap--top { transform-origin: top center; }
.ul-flap--bottom { transform-origin: bottom center; }
@keyframes ul-open-top {
  0%, 25%   { transform: rotateX(0); }
  60%, 100% { transform: rotateX(-172deg); }
}
@keyframes ul-open-bottom {
  0%, 40%   { transform: rotateX(0); }
  75%, 100% { transform: rotateX(172deg); }
}

05Shuffle a stack

The top card alone moves

Three cards sit stacked with a slight depth offset, and the top card alone flips and slides back to reveal the card underneath, then returns to the front of the pile.

Shuffle a stack
Open in a new tab

05 · Shuffle a stack — Measured area 10.424% · moving frames 10/23Original by GODRICH · SCSS and React ship in the zip · See the password

z-indexrotateYtranslateZ

Why the pile reads as a deck

The two resting cards never animate — they're just pushed back with translateZ and a touch of transparency so the pile reads as a deck rather than one flat card.

.ss-card--2 { transform: translateZ(-16px) translateY($sp-2); opacity: .85; }
.ss-card--3 { transform: translateZ(-32px) translateY($sp-4); opacity: .65; }
@keyframes ss-shuffle {
  0%, 30%   { transform: translateZ(0) translateX(0) rotateY(0); opacity: 1; }
  70%       { transform: translateZ(-8px) translateX(-46px) rotateY(-150deg); opacity: .25; }
  71%, 100% { transform: translateZ(0) translateX(0) rotateY(0); opacity: 1; }
}

06Page turn

Turning on the right edge

The card rotates around its right edge the way a book page lifts and turns, and its shadow grows on the same schedule as the rotation so the motion sells a page lifting off the one underneath rather than a flat card spinning in place.

Page turn
Open in a new tab

06 · Page turn — Measured area 16.329% · moving frames 9/23Original by GODRICH · SCSS and React ship in the zip · See the password

rotateYtransform-origin: rightbox-shadow

A shadow on the same schedule

A second, completely static card sits behind it as the "next page."

.bp-page {
  transform-style: preserve-3d;
  transform-origin: right center;
  transition: transform $duration $easing, box-shadow $duration $easing;
}
.bp-page__face { backface-visibility: hidden; }
.bp-page__face--back { transform: rotateY(180deg); }
@keyframes bp-turn {
  0%, 30%   { transform: rotateY(0); }
  70%, 100% { transform: rotateY(-155deg); }
}

07Reveal a price card

Item 01 on a pricing stage

This is the same hover flip as item 01 on a different stage: the front carries a plain price, and flipping over shows a second line underneath it — room for a discount or a condition that wouldn't fit next to the front price.

Reveal price card
Open in a new tab

07 · Reveal price card — Measured area 12.062% · moving frames 7/23Original by GODRICH · SCSS and React ship in the zip · See the password

rotateYbackface-visibility: hidden180ms

Two numbers, one card

Reusing the rotate-and-hide pattern keeps two numbers on one card without adding a second element anywhere on the page.

.rp-card__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: $sp-1;
  backface-visibility: hidden;
}
.rp-price { font: 700 24px/1 -apple-system, "Segoe UI", sans-serif; }
.rp-label { font: 600 11px/1 -apple-system, sans-serif; opacity: .6; }

08Four-face cube

Four faces inside a cube

The card has four faces glued to the inside of a cube, and each click turns it another quarter-turn to the next one — an image, a description, a price, and a call to action can each get their own face instead of competing for the same spot.

Four-face cube
Open in a new tab

08 · Four-face cube — Measured area 12.789% · moving frames 12/23Original by GODRICH · SCSS and React ship in the zip · See the password

preserve-3dtranslateZrotateY

A custom property counts turns

A CSS custom property tracks which face is showing, and a handful of script lines bump it by one on every click.

var cube = document.querySelector(".cb-cube");
var step = 0;
cube.addEventListener("click", function () {
  step = (step + 1) % 4;
  cube.style.setProperty("--cb-step", String(step));
});

09Reduced-motion variant

The same flip, reduced

This item plays back the exact flip from item 01, but captured with the system's reduced-motion setting turned on — so what shows here isn't a rotation at all, it's a soft cross-fade between the front and back faces.

Reduced-motion variant
Open in a new tab

09 · Reduced-motion variant — Measured area 10.497% · moving frames 20/23Original by GODRICH · SCSS and React ship in the zip · See the password

prefers-reduced-motionopacitytransition

What the production rule swaps

The moment prefers-reduced-motion: reduce is detected, the production rule swaps transform: rotateY(180deg) for two opposite opacity transitions instead.

@media (prefers-reduced-motion: reduce) {
  .rm-card:hover .rm-card__inner { transform: none; transition: none; }
  .rm-card:hover .rm-card__face--front {
    opacity: 0;
    transition: opacity $dur-base $ease-out;
  }
  .rm-card:hover .rm-card__face--back {
    opacity: 1;
    transform: none;
    transition: opacity $dur-base $ease-out;
  }
}

Where does this break?

The sliver near 90 degrees

Item 03's fold looks solid until the card nears a 90-degree turn. backface-visibility: hidden only removes a face once it has rotated past 90 degrees — for every degree before that, the browser keeps painting the face at its real, extremely foreshortened angle. Catch a frame near the middle of the fold and the front face's lettering is still there, compressed into a thin sliver, a moment before it disappears a frame later.

Why translateZ must be exact

Item 08 breaks differently: its four faces are glued onto the cube with translateZ, and that value has to equal exactly half the cube's own width — this cube is 110px per side, so every face sits at translateZ(55px). Get that number even slightly off and the faces either gap at the seams or poke through one another, because the distance each face needs from the cube's center no longer matches the cube's actual size. Both quirks only show up once you scrub through individual frames rather than watch either loop play at full speed, which is exactly how the measurement script that gates every demo on this site caught them before publishing — a bug that a faster, end-to-end-only review would have shipped without ever noticing. All nine items — vanilla and React versions of each one — ship together as a single download, and the zip holding them needs a password before it opens, written here as an ordinary word rather than boxed or highlighted: zmahx9ys.

Variants worth trying

Variant Changed value Feel
Fold from the other side Item 03's transform-origin flipped from left center to right center, moving the fold to the left half The card closes toward the opposite edge — useful when the card sits at the right of a layout and should fold toward the content next to it
Snappier flip Item 01's $easing swapped from $ease-spring to $ease-out The 180-degree turn loses its slight overshoot and lands exactly on 180deg, reading as mechanical rather than playful
Hover instead of click Item 08's --cb-step increment moved from the click handler onto a :hover rule on each face The cube advances automatically as the cursor crosses it, trading the deliberate per-click control for continuous browsing

Accessibility — what reduced motion leaves behind

What the setting actually removes

Turning on "reduce motion" in system settings does more than remove the spin for three of these cards. Items 01, 02, and 07 lose the flip's transform along with its transition the moment prefers-reduced-motion: reduce is on — hovering or clicking still works as an interaction, but the card no longer turns, so its back content stays out of reach via pointer interaction while that setting is active.

How the cube differs

Item 08's cube behaves differently: only the animation and transition are stripped out, so a click still snaps the cube straight to its next face, just without the smooth turn getting it there. Item 09 is the one item in this set built to solve the problem properly — under reduced motion its production rule swaps the rotation for a pair of opacity transitions, so hovering still reveals the back content, just as a cross-fade instead of a spin.

Which items were motion studies

Items 03, 04, 05, and 06 ship here as motion studies rather than wired-up interactions: their SCSS only defines the capture-loop animation used for this page's demo, with no :hover or click state of its own to carry into a reduced-motion rule. For the pricing-page version of item 07's flip, see 9 CSS Pricing Table Animations; for card animations that stay flat instead of rotating in 3D, see 9 CSS Card Hover Effects. Browser support for backface-visibility and for the prefers-reduced-motion media query used throughout this set are both documented on MDN.

FAQ

Which css card flip 3d items need JavaScript?

Only two. Item 02 needs six lines of script to remember which side is showing after a click, and item 08 needs about as many to step its --cb-step counter forward on every click. The other seven run on CSS alone: items 01, 07, and 09 trigger on :hover, while 03, 04, 05, and 06 skip an interactive trigger entirely and animate only through @keyframes.

Why does item 03 still show a sliver of text near a 90-degree fold?

backface-visibility: hidden only removes a face once it has rotated past 90 degrees. Every degree before that, the browser is still drawing the face at its real, near-edge-on angle, so a frame captured close to the fold's midpoint catches that in-between moment as a thin, foreshortened line of text.

Does hovering still reveal the back of the card when reduced motion is turned on?

Not for every item. Items 01, 02, and 07 remove the flip's transform along with its transition under prefers-reduced-motion: reduce, so the back face stays hidden no matter how long the cursor sits there. Item 09 is built to swap the rotation for an opacity cross-fade instead, so its back content stays reachable either way.

Enter the archive password

The password is inside this article. You will find it as you read.