CSS / Reference / backface-visibility

backface-visibility는 3D 변형으로 요소의 뒷면이 보이는 방향이 되었을 때 그 면을 표시할지 정합니다. visible은 뒷면도 보여 주고 hidden은 뒷면을 숨기며, 단순한 2D 회전에서는 같은 효과를 기대하지 않습니다.

문법과 주요 값

.face { backface-visibility: hidden; transform: rotateY(180deg); }

값의 적용 범위와 문법은 MDN의 backface-visibility 문서에서 확인할 수 있습니다.

실행 예제와 결과 비교

아래 전체 코드를 UTF-8 형식의 backface-visibility-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>backface-visibility 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.frame { width: 220px; height: 120px; perspective: 600px; border: 1px dashed #718096; }
.target, .reference { width: 220px; height: 120px; background: #bfe3ff; transform: rotateY(180deg); text-align: center; line-height: 120px; }
.target { backface-visibility: hidden; }
.reference { backface-visibility: visible; }
</style>
</head>
<body>
<main id="demo">
<h1>backface-visibility 적용 비교</h1>
<section class="samples"><div><p class="label">hidden / 180도 회전</p><div class="frame"><div class="target">앞면 FACE</div></div></div><div><p class="label">visible / 180도 회전</p><div class="frame"><div class="reference">앞면 FACE</div></div></div></section>
</main>
</body>
</html>

첫 프레임에서는 뒷면 방향의 도형이 보이지 않고 두 번째에서는 글자가 뒤집힌 상태로 보입니다. 코드의 회전을 0deg로 바꾸면 두 면 모두 앞면을 표시합니다.

양면 카드의 각 면에 적용하기

카드 뒤집기 UI에서는 앞면과 뒷면을 따로 만들고 각 면에 hidden을 적용하는 방식이 일반적입니다. 뒷면을 180도 돌려 배치하고 공통 부모를 회전하면 어느 면을 보여 줄지 제어할 수 있습니다. 부모의 preserve-3d와 각 면의 위치를 함께 확인하세요.

보이지 않는 면의 상호작용

면이 시각적으로 숨겨졌다고 접근성 트리나 탭 이동에서도 자동으로 제거되는 것은 아닙니다. 실제 카드 UI에서는 현재 면의 버튼과 설명을 어떤 방식으로 제공할지 별도로 설계해야 합니다. 움직임이 있는 전환은 사용자 모션 설정과 정지 상태도 고려합니다.

적용되지 않거나 예상과 다를 때

• rotate() 같은 2D 변형 대신 rotateY 또는 rotateX로 비교했는지 확인합니다.
• 앞면이 보이지 않으면 각 면과 부모의 회전 각도를 함께 확인합니다.