CSS3 backface-visibility — 3D 회전 시 뒷면 표시 완전 정리

 

 

Web Development · CSS3 Transform

CSS3 backface-visibility —
3D 회전 시 뒷면 표시 여부

카드 뒤집기·플립 효과의 핵심 — 뒷면을 숨길지 보일지 결정

시작 오늘 분석할 코드

같은 박스 두 개를 135도 Y축 회전시켰는데 한쪽은 backface-visibility: hidden, 다른 한쪽은 visible. 결과가 어떻게 다른지 비교한다.

.container { perspective: 300px; /* 3D 원근감 */ } .box { background: #82cbd8; transform: rotateY(135deg); /* Y축으로 135도 회전 — 뒷면이 보임 */ } #back1 { backface-visibility: hidden; } /* 뒷면 숨김 */ #back2 { backface-visibility: visible; } /* 뒷면 보임 (기본) */

실제 출력 미리보기

BACK

backface-visibility: hidden

BACK

backface-visibility: visible

※ 왼쪽: 135도 회전했지만 아무것도 안 보임 (뒷면 숨김). 오른쪽: 거울처럼 뒤집어진 BACK 글자가 보임.

용어 용어 정리

backface-visibility3D 회전 시 뒷면 표시 여부

visible (기본)뒷면도 보임 (거울처럼 뒤집어짐)

hidden뒷면 숨김 — 90도 넘으면 사라짐

rotateY(135deg)Y축 135도 회전 → 뒷면 90% 노출

flip 카드앞면+뒷면 카드를 뒤집는 효과

perspective3D 원근감 — backface 효과 보려면 필요

---

1 회전 각도와 뒷면의 관계

rotateY 각도 vs 보이는 면 0° → 앞면 정면 45° → 앞면이 비스듬히 보임 90° → 옆면 (선만) 135° → 뒷면이 비스듬히 보임 (이 코드) 180° → 뒷면 정면 (좌우 반전)

※ 이 코드의 135도 의미

• 90도를 넘었으므로 뒷면이 보이는 상태
• visible: 거울처럼 뒤집어진 BACK 글자 표시
• hidden: 90도부터는 아예 안 보임

---

2 카드 플립의 표준 패턴

backface-visibility의 가장 흔한 활용은 카드 뒤집기다. 앞면과 뒷면 두 div를 겹쳐두고, 둘 다 backface-visibility: hidden으로 설정.

.card { position: relative; transform-style: preserve-3d; transition: transform 0.6s; } .card.flipped { transform: rotateY(180deg); } .card .face { position: absolute; backface-visibility: hidden; /* 핵심! */ } .card .back { transform: rotateY(180deg); } /* 뒷면은 미리 180도 돌려둠 */ /* 결과: - 평소엔 앞면이 보임 (뒷면은 0~90도까지만 보이는데 hidden이라 안 보임) - flipped면 카드가 180도 돌고 → 앞면은 뒤로(hidden), 뒷면이 앞으로 */

---

3 visible vs hidden — 언제?

visible (기본)

한 면짜리 요소 — 회전해도 뒷면도 거울처럼 보여야 할 때

hidden

앞·뒷면 따로 만들어 카드 플립 — 뒷면이 안 보여야 하는 곳

---

 

반응형

 

4 perspective는 왜 부모에 줘야 하나?

이 코드의 perspective는 .container(부모)에 있고, 회전은 .box(자식)에 있다. 이 분리가 핵심.

위치	효과
부모에 perspective	여러 자식이 같은 시점 공유 → 일관된 3D 공간
자기 자신에 perspective	다른 transform과 한 줄에 — 각자 다른 시점

---

5 자주 하는 실수

실수	증상	해결
perspective 없이 backface 시도	3D 효과 안 나옴	부모에 perspective
카드 플립 시 뒤가 그대로 보임	backface-visibility: visible (기본)	앞·뒷면에 hidden
transform-style 누락	3D 자식이 평면처럼	부모에 transform-style: preserve-3d
모바일 사파리에서 깜박임	3D 렌더링 차이	-webkit-backface-visibility 추가

---

핵심 한 줄 요약

backface-visibility3D 회전 시 뒷면 표시 여부

hidden뒷면 안 보임 — 카드 플립의 핵심

visible (기본)뒷면 거울처럼 보임

90도 임계90도 넘으면 뒷면 보이기 시작

카드 플립앞·뒷면 hidden + 한쪽은 미리 180도

Tags

#CSS3 #backface-visibility #hidden #visible #3D회전 #rotateY #rotateX #transform-style #preserve-3d #카드플립 #카드뒤집기 #perspective #animation #CSS #HTML #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

CSS3, backface-visibility, hidden, visible, 3D회전, rotateY, rotateX, transform-style, preserve-3d, 카드플립, 카드뒤집기, perspective, animation, CSS, HTML, 웹개발, 티스토리