CSS backface-visibility 속성 완벽 정리 – 요소 뒷면 표시 여부 제어하기

CSS backface-visibility 속성이란?

backface-visibility 속성은 요소가 화면을 향하지 않은 상태, 즉 뒷면이 노출되는 상황에서 해당 요소를 사용자에게 보여줄지 여부를 결정하는 CSS 속성입니다.

3D 변형(transform)이 적용된 요소가 회전하면서 뒷면이 화면에 드러날 때, 이 속성을 활용하면 뒷면을 숨기거나 그대로 표시할 수 있습니다. 특히 카드 뒤집기 효과처럼 입체적인 3D 애니메이션을 구현할 때 필수적으로 사용되는 속성입니다.

주요 속성값

visible (기본값): 요소가 회전되어 뒷면이 향하더라도 내용이 그대로 표시됩니다.
hidden: 요소의 뒷면은 화면에 표시되지 않고 숨겨집니다.

예제 코드

다음 예제는 backface-visibility 속성과 함께 perspective, transform-style 등의 3D 관련 속성을 조합하여 회전 효과를 구현하는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
   <head>
      <style>
         .demo1 {
            position: relative;
            width: 150px;
            height: 150px;
            background-color: yellow;
            perspective: 80px;
            margin: 50px;
            perspective-origin: left;
            transform: rotateY(180deg);
         }
         .demo2 {
            position: absolute;
            padding: 20px;
            background-color: orange;
            transform-style: preserve-3d;
            transform: rotateX(45deg);
            backface-visibility: visible;
         }
      </style>
   </head>
   <body>
      <h1>Rotation</h1>
      <div class = "demo1">Demo
         <div class = "demo2">Demo
         </div>
      </div>
   </body>
</html>

코드 설명

위 예제에서 .demo1 요소는 perspective: 80px로 원근감을 부여하고, rotateY(180deg)를 통해 Y축 기준으로 180도 회전시켰습니다. 내부의 .demo2 요소는 rotateX(45deg)로 X축 방향으로 기울어져 있으며, backface-visibility: visible

만약 backface-visibility 값을 hidden으로 변경하면, 요소가 뒤집혔을 때 뒷면이 보이지 않게 됩니다. 이 원리를 응용하면 앞면과 뒷면 콘텐츠가 다른 플립 카드(flip card) UI를 손쉽게 만들 수 있습니다.



브라우저 호환성
backface-visibility 속성은 Chrome, Firefox, Safari, Edge 등 주요 최신 브라우저에서 모두 지원됩니다. 다만 일부 구형 브라우저에서는 벤더 접두사(-webkit-backface-visibility)가 필요할 수 있으니 참고하세요.