backface-visibility

CSS Reference

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

문법과 주요 값

속성	초기값	상속	주요 적용 조건
`backface-visibility`	visible	아니요	변환할 수 있는 요소의 3차원 뒷면

초기값은 브라우저 기본 스타일시트가 HTML 요소에 적용한 값과 같다는 뜻이 아닙니다. 실제 값은 개발자 도구의 Computed에서 확인하세요.

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

값 또는 구분	동작과 선택 기준
`visible`	뒤쪽에서 본 면도 표시
`hidden`	뒷면 방향일 때 표시하지 않음
`rotateY(180deg)`	뒷면 비교를 위한 3D 회전
`transform-style: preserve-3d`	여러 면을 구성할 때 3D 배치 맥락을 유지하는 별도 속성

값과 적용 조건은 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에서는 현재 면의 버튼과 설명을 어떤 방식으로 제공할지 별도로 설계해야 합니다. 움직임이 있는 전환은 사용자 모션 설정과 정지 상태도 고려합니다.

한 가지 설정씩 바꾸어 확인하기

앞의 전체 코드를 저장한 예제 파일을 사용합니다. 지정한 선택자의 CSS만 변경하고, 서로 다른 비교 조건을 한꺼번에 바꾸지 않습니다.

기존 두 면의 rotateY(180deg)만 0deg로 바꾸면 앞면이 보입니다. 90deg 부근과 180deg도 비교한 뒤 원래 회전으로 복구합니다.
실제 양면 카드로 확장할 때는 두 면의 위치와 부모 회전뿐 아니라 현재 면의 버튼·탭 이동·모션 감소 조건도 관리합니다. 이 속성 하나가 카드 UI 전체를 구현하는 것은 아닙니다.

회전과 상태 전환을 함께 구현하려면 transform과 transition으로 상태 변화 표현하기를 참고하세요.

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

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

CSS Reference