Computer >> 컴퓨터 >  >> 프로그래밍 >> CSS

CSS backface-visibility 속성 완벽 가이드 – 화면 뒷면 요소의 표시 여부 제어하기

CSS의 backface-visibility 속성은 요소가 화면을 향하고 있지 않을 때(즉, 뒷면이 보이는 상태일 때) 해당 요소를 화면에 표시할지 여부를 결정하는 속성입니다.

backface-visibility 속성이란?

3D 변환(transform)이 적용된 요소는 회전 각도에 따라 앞면과 뒷면이 존재하게 됩니다. 이때 요소의 뒷면이 사용자에게 향해 있을 때 그 내용을 그대로 보여줄 것인지, 아니면 숨길 것인지를 지정할 수 있습니다.

이 속성은 다음 두 가지 값을 가집니다.

  • visible (기본값): 요소의 뒷면이 화면에 그대로 표시됩니다.
  • hidden: 요소의 뒷면이 숨겨져 화면에 나타나지 않습니다.

예제 코드

아래 예제는 rotateY(180deg)로 회전된 부모 요소 안에서 backface-visibility: visible;이 적용된 자식 요소가 어떻게 렌더링되는지 보여줍니다.

<!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;로 3D 원근감을 설정하고, rotateY(180deg)로 Y축 기준 180도 회전시켜 뒷면이 보이는 상태를 만듭니다.
  • .demo2: transform-style: preserve-3d;로 3D 공간을 유지하며, backface-visibility: visible; 덕분에 뒷면 상태에서도 요소가 화면에 표시됩니다.

활용 팁

backface-visibility는 카드 뒤집기(flip card) 효과와 같은 3D 인터랙션 UI를 구현할 때 특히 유용합니다. 카드의 앞면에는 visible, 뒷면에는 hidden을 적절히 조합하면 자연스러운 뒤집기 애니메이션을 만들 수 있습니다. 또한 이 속성은 대부분의 최신 브라우저에서 벤더 접두사(-webkit-backface-visibility) 없이 잘 지원되므로 크로스 브라우징에도 안정적입니다.