30 CSS Hover Effects 14 / 30

CSS Card Flip Hover Effect

Four CSS 3D card flip hover effects — horizontal flip, vertical flip, diagonal corner-peel flip, and reverse accordion fan — using rotateY/rotateX on preserve-3d containers with backface-visibility to reveal a styled back face on hover.

Pure CSS MIT licensed
Live Demo Open in tab

This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.

Open in playground

The code

<div class="hv-14">
  <div class="hv-14__grid">
    <div class="hv-14__scene">
      <div class="hv-14__card hv-14__card--h">
        <div class="hv-14__face hv-14__face--front">
          <span class="hv-14__icon">♦</span>
          <span class="hv-14__label">Hover Me</span>
          <span class="hv-14__sub">horizontal flip →</span>
        </div>
        <div class="hv-14__face hv-14__face--back hv-14__back--rose">
          <span class="hv-14__icon">✦</span>
          <span class="hv-14__label">Revealed!</span>
          <span class="hv-14__sub">back face content</span>
        </div>
      </div>
    </div>
    <div class="hv-14__scene hv-14__scene--v">
      <div class="hv-14__card hv-14__card--v">
        <div class="hv-14__face hv-14__face--front hv-14__front--teal">
          <span class="hv-14__icon">◈</span>
          <span class="hv-14__label">Vertical</span>
          <span class="hv-14__sub">↓ flip over top</span>
        </div>
        <div class="hv-14__face hv-14__face--back hv-14__back--indigo">
          <span class="hv-14__icon">❋</span>
          <span class="hv-14__label">Back Face</span>
          <span class="hv-14__sub">rotateX flip</span>
        </div>
      </div>
    </div>
    <div class="hv-14__scene">
      <div class="hv-14__card hv-14__card--diag">
        <div class="hv-14__face hv-14__face--front hv-14__front--amber">
          <span class="hv-14__icon">◬</span>
          <span class="hv-14__label">Diagonal</span>
          <span class="hv-14__sub">corner-peel axis</span>
        </div>
        <div class="hv-14__face hv-14__face--back hv-14__back--orange">
          <span class="hv-14__icon">⟡</span>
          <span class="hv-14__label">Peeled!</span>
          <span class="hv-14__sub">rotate3d(1,1,0)</span>
        </div>
      </div>
    </div>
    <div class="hv-14__fan-wrap">
      <div class="hv-14__fan-card hv-14__fan-card--1">
        <span class="hv-14__fan-label">Fan</span>
      </div>
      <div class="hv-14__fan-card hv-14__fan-card--2"></div>
      <div class="hv-14__fan-card hv-14__fan-card--3"></div>
      <span class="hv-14__fan-hint">hover the stack</span>
    </div>
  </div>
</div>
.hv-14,.hv-14 *,.hv-14 *::before,.hv-14 *::after{box-sizing:border-box;margin:0;padding:0}
.hv-14 ::selection{background:#be123c;color:#fff}
.hv-14{
  --bg:#0a0008;
  --text:#ffe4e6;
  --dim:#6b7280;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:60px 24px;
}
.hv-14__grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:40px;
  max-width:720px;width:100%;
}

/* scene wrapper */
.hv-14__scene{perspective:800px}
.hv-14__scene--v{perspective:800px}

/* card */
.hv-14__card{
  position:relative;width:100%;height:220px;
  transform-style:preserve-3d;
  transition:transform .65s cubic-bezier(.4,0,.2,1);
  cursor:pointer;
}
.hv-14__face{
  position:absolute;inset:0;border-radius:14px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:24px;
}
.hv-14__icon{font-size:2rem}
.hv-14__label{font-size:1rem;font-weight:700;color:var(--text)}
.hv-14__sub{font-size:.75rem;color:var(--dim);letter-spacing:.05em}

/* faces */
.hv-14__face--front{
  background:rgba(190,18,60,.2);border:1px solid rgba(190,18,60,.4);
  color:var(--text);
}
.hv-14__back--rose{
  background:#be123c;color:#fff;
  transform:rotateY(180deg);
}
.hv-14__front--teal{background:rgba(13,148,136,.2);border:1px solid rgba(13,148,136,.4)}
.hv-14__back--indigo{
  background:#4338ca;color:#fff;
  transform:rotateX(180deg);
}
.hv-14__front--amber{background:rgba(180,83,9,.2);border:1px solid rgba(180,83,9,.4)}
.hv-14__back--orange{
  background:#c2410c;color:#fff;
  transform:rotate3d(1,1,0,180deg);
}

/* flip triggers */
.hv-14__card--h:hover{transform:rotateY(180deg)}
.hv-14__card--v:hover{transform:rotateX(180deg)}
.hv-14__card--diag:hover{transform:rotate3d(1,1,0,180deg)}

/* fan accordion */
.hv-14__fan-wrap{
  position:relative;height:220px;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  cursor:pointer;
}
.hv-14__fan-card{
  position:absolute;width:100%;height:220px;border-radius:14px;
  border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
  transform-origin:bottom center;
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.hv-14__fan-card--1{background:rgba(139,92,246,.25);z-index:3}
.hv-14__fan-card--2{background:rgba(109,40,217,.2);z-index:2}
.hv-14__fan-card--3{background:rgba(91,33,182,.15);z-index:1}
.hv-14__fan-label{font-size:1.1rem;font-weight:700;color:#c4b5fd}
.hv-14__fan-hint{position:relative;z-index:4;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:8px}
.hv-14__fan-wrap:hover .hv-14__fan-card--2{transform:rotateY(-30deg)}
.hv-14__fan-wrap:hover .hv-14__fan-card--3{transform:rotateY(-55deg)}

@media(max-width:520px){.hv-14__grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .hv-14__card,.hv-14__fan-card{transition:none!important}
}

How this works

A card flip requires three elements: a .scene wrapper with perspective: 800px, a .card with transform-style: preserve-3d; transition: transform .6s, and two children (.front, .back) both using position: absolute; backface-visibility: hidden. The back face starts with transform: rotateY(180deg). Hovering the scene applies rotateY(180deg) to the card — the front hides (its backface becomes visible and is hidden) while the back face rotates into view and shows.

The vertical flip swaps rotateY for rotateX and adjusts the back face initial transform to rotateX(180deg). The diagonal peel uses a combined rotate3d(1,1,0,180deg) which rotates around the diagonal axis between X and Y. The accordion fan moves siblings with increasing rotateY delays so cards unfurl sequentially from a stacked pile.

Customize

  • Adjust flip speed from .6s to .3s for a snappier reveal or 1s for a more dramatic page-turn feel.
  • Add a different background color to the back face to provide immediate visual contrast — a dark front / light back combination is the most legible.
  • Change the flip axis by replacing rotateY(180deg) with rotateX(-180deg) on the card hover for a top-under flip like opening a trapdoor.
  • Add content to the back face — profile info, pricing, or a CTA — making the flip functional rather than purely decorative.
  • Apply filter: brightness(1.1) to the card on hover to simulate the front face catching more light as it turns toward the viewer.

Watch out for

  • backface-visibility: hidden must be on both front and back children — missing it on either one causes that face to ghostly show through during the animation.
  • Elements with overflow: hidden on the card will collapse the 3D effect — use a border-radius clip on individual faces instead of the parent card.
  • iOS Safari can flicker on backface-visibility transitions — adding -webkit-backface-visibility: hidden alongside the standard property resolves this on older iOS versions.

Browser support

ChromeSafariFirefoxEdge
60+ 12+ 60+ 60+

backface-visibility and preserve-3d are fully supported. Add -webkit- prefixes for Safari <12.

More from 30 CSS Hover Effects

CSS Split Text Hover EffectCSS Neon Glow Text Hover EffectCSS Magnetic Liquid Button Hover EffectCSS Border Draw Hover EffectCSS Shimmer Shine Button Hover EffectCSS Fill Wipe Button Hover EffectCSS 3D Press Button Hover EffectCSS Ripple Button Hover EffectCSS 3D Tilt Card Hover EffectCSS Glassmorphism Card Hover EffectCSS Spotlight Card Hover EffectCSS Slide Reveal Card Hover Effect
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →