Design Atlas
한국어
↝ Motion

Card flip

카드 플립

A card rotating 180° around its Y axis to reveal its back — a 3D effect built with perspective and transform-style: preserve-3d.

Also known as: 3D flip cardFlip reveal
···
html
<div class="scene"><div class="card">
  <div class="face front">?</div>
  <div class="face back">✓</div>
</div></div>
css
.scene{perspective:800px}
.card{position:relative;width:clamp(90px,30vmin,160px);aspect-ratio:3/4;transform-style:preserve-3d;
  animation:flip 3s ease-in-out infinite}
.face{position:absolute;inset:0;border-radius:14px;display:grid;place-items:center;
  font:800 clamp(28px,10vmin,46px)/1 sans-serif;color:#fff;backface-visibility:hidden}
.front{background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.back{background:linear-gradient(135deg,var(--accent-3),var(--accent));transform:rotateY(180deg)}
@keyframes flip{
  0%,30%{transform:rotateY(0deg)}
  50%,80%{transform:rotateY(180deg)}
  100%{transform:rotateY(360deg)}
}

Give the parent a perspective (how strong the 3D depth feels) and the rotating element transform-style: preserve-3d. Stack the front and back faces on top of each other, pre-rotate the back rotateY(180deg), and set backface-visibility: hidden on both so the face pointing away never shows through.

A smaller perspective value (say 400px) exaggerates the depth distortion for a more "close to camera" feel; a larger one (1200px+) reads as flatter, more subtle rotation.

When to use

Use it when the front and back genuinely hold different content (a question/answer, a summary/detail). For just switching screens, a fade or slide reads better.