호버/클릭으로 뒤집히는 3D 플립 카드

제작 과정

한 줄 요약

바깥에 perspective, 안쪽 카드에 transform-style: preserve-3d + rotateY/X를 주고, 앞뒷면을 같은 자리에 겹친 뒤 backface-visibility: hidden으로 한 면만 보이게 합니다.

이럴 때 필요해요

프로필상품 카드에서 앞면은 요약, 뒷면은 상세/CTA를 담아 공간을 아껴 보여주고 싶을 때.

어떻게 동작하나

wrapper에 perspective로 원근을 주고, 카드에 preserve-3d.
앞면은 그대로, 뒷면은 미리 rotateY(180deg) 돌려 뒤에 배치하고 둘 다 backface-hidden.
트리거(hover면 group-hover 클래스 / click이면 state)로 카드 전체를 180 회전.

놓치기 쉬운 것

preserve-3d가 없으면 평면 회전이 돼 뒷면이 안 보임.
backface-visibility: hidden을 양면에 줘야 뒤집을 때 반대 면이 비치지 않음.
그림자/필터를 부모에 걸면 3D가 깨질 수 있어 각 면에 적용.

이런 곳에 써요

팀/프로필 카드 앞뒤
상품 카드 상세 전환게임 카드

import type { Metadata } from "next"; import { FlipCard3DDemo } from "./-components/FlipCard3DDemo"; export const metadata: Metadata = { title: "3D 플립 카드 (데모)", description: "호버 또는 클릭하면 3D로 뒤집혀 뒷면이 나오는 플립 카드. transform-style: preserve-3d + backface-visibility: hidden + rotateY/X로 구현, 트리거(hover/click)·축·속도 조절.", robots: { index: false, follow: false }, }; export default function Page() { return ( <main className="flex min-h-[100dvh] items-center justify-center bg-gradient-to-br from-slate-50 via-white to-fuchsia-50/40"> <FlipCard3DDemo /> </main> ); }