CSS backface-visibility 속성 – 올바른 이해와 사용 방법

정의 및 사용 방법

backface-visibility 속성은 3D transform으로 변형되는 요소의 뒷면이 원근감을 바라보는 관찰자의 시점을 향할 때,
지정하는 해당 요소의 그 뒷면을 표시할지, 아니면 숨길지를 지정합니다.

기본 예제

아래의 'CSS 라이브 데모'를 통해 3D transform으로 변형되는 요소의 뒷면이 원근감을 바라보는 관찰자의 시점을 향할 때, 해당 요소가 backface-visibility 속성의 값에 따라 표시되는지 아니면 숨겨지는지 직접 확인해 보세요.

HTML

<div class="container">
    <div class="face front">앞</div>
    <div class="face back">뒤</div>
    <div class="face left">좌</div>
    <div class="face right">우</div>
    <div class="face top">상</div>
    <div class="face bottom">하</div>
</div>

CSS

.container {
    width: 200px; height: 200px;
    display: flex; align-items: center; justify-content: center; border: 1px dahsed silver;
    perspective: 210px; perspective-origin: left top; /* 원근감을 바라보는 관찰자의 시점 */
    transform-style: preserve-3d;
}
.face { /* 3D transform으로 변형되는 요소 */
    position: absolute; width: 100px; height: 100px; background: rgba(114, 205, 246, 0.65);
    backface-visibility: /* value */
}
.front  { transform: translateZ(50px);                 }
.back   { transform: rotateY(180deg) translateZ(50px); } /* 뒷면이 원근감을 바라보는 관찰자의 시점을 향함 */
.left   { transform: rotateY(-90deg) translateZ(50px); }
.right  { transform: rotateY(90deg)  translateZ(50px); } /* 뒷면이 원근감을 바라보는 관찰자의 시점을 향함 */
.top    { transform: rotateX(90deg)  translateZ(50px); }
.bottom { transform: rotateX(-90deg) translateZ(50px); } /* 뒷면이 원근감을 바라보는 관찰자의 시점을 향함 */

특징

backface-visibility 속성은 뒷면을 표시할지, 아니면 숨길지를 설정할 요소에 직접 지정해야 합니다.
이 속성은 상속되지 않으며, 부모나 조상 요소에만 지정할 경우 해당 자식 요소는 아무런 효과가 없습니다.

주의할 점

이 속성으로 지정하는 해당 요소의 뒷면은 화면상의 사용자를 기준으로 하지 않습니다.
원근감을 바라보는 관찰자의 시점을 기준으로 뒷면이 향하는지를 계산합니다. 관찰자의 시점은 perspective-origin으로 설정된 3D transform에서 원근감을 바라보는 관찰자의 기준 위치(origin)이거나 transform의 변형 함수 값인 perspective()를 직접 사용한 해당 요소입니다.
즉, 사용자가 모니터로 보기에는 뒷면 같아 보여도, backface-visibility 속성은 설정된 관찰자의 시점을 기준으로 뒷면을 판정하므로 이점을 주의해야 합니다.

참고하세요!
perspective나 perspective()를 지정하지 않아도 3D transform에 지정한 backface-visibility는 여전히 적용됩니다. 다만, 원근감이 없으면 Z축 깊이에 따른 시각적인 깊이에 대한 입체감은 나타나지 않으므로, 해당 요소의 중심을 평행하게 바라보는 관찰자의 위치 시점만이 존재하며, 이때 앞면과 뒷면의 깊이에 대한 입체감은 평면처럼 보일 수 있습니다.

형식 구문

구문

CSS

/* 키워드 값 */
backface-visibility: visible; /* 초깃값 */
backface-visibility: hidden;

/* 글로벌 값 */
backface-visibility: inherit;
backface-visibility: initial;
backface-visibility: revert;
backface-visibility: revert-layer;
backface-visibility: unset;

값

backface-visibility 속성 값
`visible`	요소의 뒷면이 원근감을 바라보는 관찰자의 시점을 향할 때, 지정하는 해당 요소의 그 뒷면을 표시합니다.
`hidden`	요소의 뒷면이 원근감을 바라보는 관찰자의 시점을 향할 때, 지정하는 해당 요소의 그 뒷면을 숨김니다.

형식 정의

backface-visibility 속성의 형식 정의
초깃값	`visible`
적용 요소	변형 가능한 요소 즉, 테이블 컬럼이나 컬럼 그룹을 제외한 요소의 영역인 너비나 높이를 지정할 수 있는 요소
상속	아니오
애니메이션	아니오

추가 예제

backface-visibility 속성은 해당 요소의 뒷면이 원근감을 바라보는 관찰자의 시점을 향하는지를 실시간(Live)으로 계산하여 판단합니다. 다음 '라이브 데모'에서는 backface-visibility: visible과 backface-visibility: hidden을 각각 설정한 두 요소에 애니메이션을 적용하여, 이 속성이 실시간으로 계산하여 판단하는지를 확인할 수 있습니다.

'라이브 데모'에 사용된 HTML과 CSS 코드입니다.

가독성을 위해 모든 코드를 작성하지는 않았으며 주요한 관련 코드만 작성하였습니다.

CSS

.extra-live-demo-box {
    border: 3px dashed #663399;
    perspective: 700px; perspective: center center;  /* 원근감을 바라보는 관찰자의 시점 */
}
.extra-live-demo {
    animation: live-ani 4s infinite linear; /* 3D transform으로 변형되는 요소 */
    backface-visibility: /* value */
}
@keyframes live-ani {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

브라우저 호환성

backface-visibility 속성의 브라우저 호환성
속성	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`backface-visibility`	36	12	16	15.4

명세서

backface-visibility 속성의 명세서 사양
명세서 사양
3D Transform Rendering	CSS Transforms Module Level 2 #3d-transform-rendering
`backface-visibility`	CSS Transforms Module Level 2 #backface-visibility-property

참고문헌

MDN - backface-visibility