22 CSS Transition Effects 03 / 22

Flip Card 3D Transition

Six 3D flip cards using rotateY and rotateX variants with unique dark gradients, perspective depth and backface-visibility control.

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="label">CSS 3D transitions</div>
<h1>Flip Card Effects</h1>
<p class="subtitle">Hover any card to reveal the back face — built with CSS perspective and rotateY</p>

<div class="section"><div class="label">Standard — rotateY, 700ms ease</div></div>
<div class="grid">
  <div class="flip-scene c1">
    <div class="flip-card">
      <div class="flip-front c1">
        <div class="emoji">🌊</div>
        <div>
          <div class="hint">Hover to flip →</div>
          <h2>Ocean Data Analytics</h2>
        </div>
      </div>
      <div class="flip-back c1">
        <h3>Ocean Data Analytics</h3>
        <p>Real-time monitoring of 47 ocean buoys across the Pacific, tracking temperature, salinity and current velocity at 15-minute intervals.</p>
        <span class="tag">📊 View Dashboard →</span>
      </div>
    </div>
  </div>

  <div class="flip-scene c2">
    <div class="flip-card">
      <div class="flip-front c2">
        <div class="emoji">🔥</div>
        <div>
          <div class="hint">Hover to flip →</div>
          <h2>Wildfire Risk Index</h2>
        </div>
      </div>
      <div class="flip-back c2">
        <h3>Wildfire Risk Index</h3>
        <p>ML-powered prediction model combining satellite imagery, wind patterns and fuel moisture data to forecast wildfire probability zones.</p>
        <span class="tag">🛰️ View Model →</span>
      </div>
    </div>
  </div>

  <div class="flip-scene c3">
    <div class="flip-card">
      <div class="flip-front c3">
        <div class="emoji">🧬</div>
        <div>
          <div class="hint">Hover to flip →</div>
          <h2>Genomics Pipeline</h2>
        </div>
      </div>
      <div class="flip-back c3">
        <h3>Genomics Pipeline</h3>
        <p>End-to-end DNA sequencing workflow processing 2.4TB daily, with automated QC, variant calling and clinical report generation.</p>
        <span class="tag">🧪 Explore Pipeline →</span>
      </div>
    </div>
  </div>

  <div class="flip-scene c4 flip-fast">
    <div class="flip-card">
      <div class="flip-front c4">
        <div class="emoji">🤖</div>
        <div>
          <div class="hint">Fast flip →</div>
          <h2>Neural Inference Engine</h2>
        </div>
      </div>
      <div class="flip-back c4">
        <h3>Neural Inference Engine</h3>
        <p>Edge-optimised transformer models with sub-10ms latency, running natively in the browser via WebAssembly and WebGPU.</p>
        <span class="tag">⚡ Benchmark →</span>
      </div>
    </div>
  </div>
</div>

<div class="section" style="margin-top:48px"><div class="label">Vertical flip — rotateX</div></div>
<div class="grid" style="grid-template-columns:repeat(auto-fit,minmax(260px,1fr))">
  <div class="flip-scene flip-x c1">
    <div class="flip-card">
      <div class="flip-front c1">
        <div class="emoji">🌿</div>
        <div><div class="hint">Flip over ↕</div><h2>Carbon Offset Tracker</h2></div>
      </div>
      <div class="flip-back c1" style="transform:rotateX(180deg)">
        <h3>Carbon Offset Tracker</h3>
        <p>Monitor reforestation credits, renewable energy certificates and direct air capture projects across your entire portfolio.</p>
        <span class="tag">🌍 Track Offsets →</span>
      </div>
    </div>
  </div>
  <div class="flip-scene flip-x c3">
    <div class="flip-card">
      <div class="flip-front c3">
        <div class="emoji">📡</div>
        <div><div class="hint">Flip over ↕</div><h2>Satellite Telemetry</h2></div>
      </div>
      <div class="flip-back c3" style="transform:rotateX(180deg)">
        <h3>Satellite Telemetry</h3>
        <p>Low-latency uplink/downlink monitoring across 12 ground stations. Live attitude, power and comms data streams.</p>
        <span class="tag">🛰 View Telemetry →</span>
      </div>
    </div>
  </div>
</div>

<div class="stats">
  <div class="stat"><b>700ms</b><span>Default duration</span></div>
  <div class="stat"><b>1000px</b><span>Perspective</span></div>
  <div class="stat"><b>rotateY/X</b><span>Transforms</span></div>
  <div class="stat"><b>0 JS</b><span>Flip is pure CSS</span></div>
</div>
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;600;700&family=DM+Serif+Display:ital@0;1&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'DM Sans',sans-serif;background:linear-gradient(135deg,#0f2027,#203a43,#2c5364);min-height:100vh;padding:60px 24px;display:flex;flex-direction:column;align-items:center}
h1{font-family:'DM Serif Display';font-size:clamp(2rem,5vw,3.2rem);color:#fff;text-align:center;margin-bottom:8px;letter-spacing:-.02em}
.subtitle{color:#7fb3c8;font-size:1rem;text-align:center;margin-bottom:60px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:32px;width:100%;max-width:1100px}

/* 3D flip core */
.flip-scene{perspective:1000px;height:300px}
.flip-card{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.4,0,.2,1);cursor:pointer}
.flip-scene:hover .flip-card,.flip-scene:focus-within .flip-card{transform:rotateY(180deg)}
.flip-front,.flip-back{position:absolute;inset:0;border-radius:20px;backface-visibility:hidden;-webkit-backface-visibility:hidden;padding:32px;display:flex;flex-direction:column;justify-content:space-between}
.flip-back{transform:rotateY(180deg)}

/* card 1 — teal / dark */
.c1 .flip-front{background:linear-gradient(145deg,#1a9b9b,#0e6464);box-shadow:0 20px 60px rgba(14,100,100,.5)}
.c1 .flip-front .emoji{font-size:3.5rem;filter:drop-shadow(0 4px 12px rgba(0,0,0,.3))}
.c1 .flip-front h2{font-family:'DM Serif Display';font-size:1.6rem;color:#fff;line-height:1.1}
.c1 .flip-front .hint{font-size:.74rem;letter-spacing:.2em;color:rgba(255,255,255,.5);text-transform:uppercase}
.c1 .flip-back{background:#0d3b3b;border:1px solid rgba(26,155,155,.3);box-shadow:0 20px 60px rgba(14,100,100,.5)}

/* card 2 — amber / dark purple */
.c2 .flip-front{background:linear-gradient(145deg,#d97706,#92400e);box-shadow:0 20px 60px rgba(217,119,6,.4)}
.c2 .flip-front .emoji{font-size:3.5rem}
.c2 .flip-front h2{font-family:'DM Serif Display';font-size:1.6rem;color:#fff;line-height:1.1}
.c2 .flip-front .hint{font-size:.74rem;letter-spacing:.2em;color:rgba(255,255,255,.5);text-transform:uppercase}
.c2 .flip-back{background:#3b1a04;border:1px solid rgba(217,119,6,.3);box-shadow:0 20px 60px rgba(217,119,6,.4)}

/* card 3 — rose / dark */
.c3 .flip-front{background:linear-gradient(145deg,#e11d48,#9f1239);box-shadow:0 20px 60px rgba(225,29,72,.4)}
.c3 .flip-front .emoji{font-size:3.5rem}
.c3 .flip-front h2{font-family:'DM Serif Display';font-size:1.6rem;color:#fff;line-height:1.1}
.c3 .flip-front .hint{font-size:.74rem;letter-spacing:.2em;color:rgba(255,255,255,.5);text-transform:uppercase}
.c3 .flip-back{background:#3b0618;border:1px solid rgba(225,29,72,.3);box-shadow:0 20px 60px rgba(225,29,72,.4)}

/* card 4 — indigo */
.c4 .flip-front{background:linear-gradient(145deg,#4f46e5,#1e1b4b);box-shadow:0 20px 60px rgba(79,70,229,.4)}
.c4 .flip-front .emoji{font-size:3.5rem}
.c4 .flip-front h2{font-family:'DM Serif Display';font-size:1.6rem;color:#fff;line-height:1.1}
.c4 .flip-front .hint{font-size:.74rem;letter-spacing:.2em;color:rgba(255,255,255,.5);text-transform:uppercase}
.c4 .flip-back{background:#0d0b2e;border:1px solid rgba(79,70,229,.3);box-shadow:0 20px 60px rgba(79,70,229,.4)}

/* back side shared */
.flip-back h3{font-family:'DM Serif Display';font-size:1.3rem;color:#fff;margin-bottom:12px}
.flip-back p{font-size:.88rem;color:rgba(255,255,255,.65);line-height:1.7;margin-bottom:16px}
.flip-back .tag{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.8);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:20px}

/* vertical flip variant */
.flip-scene.flip-x .flip-card{transition:transform .7s cubic-bezier(.4,0,.2,1)}
.flip-scene.flip-x:hover .flip-card{transform:rotateX(180deg)}
.flip-scene.flip-x .flip-back{transform:rotateX(180deg)}

/* horizontal flip with different easing */
.flip-scene.flip-fast .flip-card{transition:transform .4s cubic-bezier(.7,0,.2,1)}

/* section titles */
.section{width:100%;max-width:1100px;margin:0 0 16px}
.section h2{font-family:'DM Serif Display';font-size:1.5rem;color:rgba(255,255,255,.4);font-weight:400}
.label{display:inline-block;font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#7fb3c8;margin-bottom:8px}

/* stats bar */
.stats{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;margin-top:48px;background:rgba(255,255,255,.05);border-radius:16px;padding:24px 32px;width:100%;max-width:1100px;border:1px solid rgba(255,255,255,.08)}
.stat{text-align:center}
.stat b{display:block;font-size:1.8rem;font-weight:700;color:#fff}
.stat span{font-size:.75rem;color:#7fb3c8;letter-spacing:.12em;text-transform:uppercase}

@media (prefers-reduced-motion:reduce){.flip-card{transition:none !important}}

More from 22 CSS Transition Effects

Number Counter AnimationCard Tilt 3D HoverStaggered List AnimationCursor Trail EffectMagnetic Button EffectSplit Text Reveal TransitionProgress Bar AnimationButton Hover TransitionsText Reveal AnimationImage Zoom Hover TransitionBackground Color TransitionBorder Animation Transition
View the full collection →

Search CodeFronts

Loading…

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