카드가 Y축으로 180도 회전하며 앞면에서 뒷면으로 뒤집히는 3D 효과. perspective와 transform-style: preserve-3d로 만듭니다.
디자인 아틀라스<div class="scene"><div class="card">
<div class="face front">?</div>
<div class="face back">✓</div>
</div></div>.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)}
}부모에 perspective(원근감의 강도)를 주고, 회전할 요소에 transform-style: preserve-3d를 줍니다. 앞면과 뒷면을 겹쳐 놓고 뒷면은 미리 rotateY(180deg)로 돌려둔 뒤, backface-visibility: hidden으로 뒤집혔을 때 반대쪽 면이 비쳐 보이지 않게 감춥니다.
perspective 값이 작을수록(예: 400px) 원근 왜곡이 강해져 카메라에 가까운 느낌이, 클수록(1200px 이상) 더 평평하고 은은한 회전처럼 보입니다.
앞뒤로 서로 다른 정보(질문/답, 요약/상세)를 담을 때 씁니다. 단순히 화면을 전환하는 용도로는 과합니다 — 그럴 땐 페이드나 슬라이드가 낫습니다.