backface-visibility

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

CSS backface-visibility 속성은 요소의 뒷면이 사용자를 향할 때 보여야 하는지 지정합니다.

시도해 보기

backface-visibility: visible;

backface-visibility: hidden;

#default-example {
  background: linear-gradient(skyblue, khaki);
}

#example-element {
  width: 100px;
  height: 100px;
  perspective: 550px;
  perspective-origin: 220% 220%;
  transform-style: preserve-3d;
}

.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  background: rgba(0, 0, 0, 0.4);
  font-size: 60px;
  color: white;
}

.front {
  transform: translateZ(50px);
}

.back {
  background: rgb(230, 0, 0);
  color: white;
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgba(0, 0, 0, 0.6);
  transform: rotateY(90deg) translateZ(50px);
}

.bottom {
  background: rgba(0, 0, 0, 0.6);
  transform: rotateX(-90deg) translateZ(50px);
}

요소의 뒷면은 앞면의 거울상입니다. 2D 상태에서는 볼 수 없지만 변형을 통해 3D 공간에서 회전되면 노출될 수 있습니다. (2D 변형에는 원근이 없으므로 효과가 없습니다.)

구문

css

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

/* 전역 값 */
backface-visibility: inherit;
backface-visibility: initial;
backface-visibility: unset;

backface-visibility 속성은 다음 목록의 키워드 중 하나를 선택해 지정할 수 있습니다.

값

visible: 뒷면이 사용자를 향하면 보입니다.
hidden: 뒷면이 사용자를 향해도 보이지 않습니다. 요소가 뒤를 향하면 사용자로부터 숨기는 것과 같습니다.

형식 정의

초기값	`visible`
적용대상	transformable elements
상속	no
계산 값	as specified
Animation type	discrete

형식 구문

backface-visibility = 
  visible  |
  hidden

예제

육면체의 뒷면 비교

아래 예제는 투명한 뒷면의 육면체와 불투명한 뒷면의 육면체를 하나씩 보입니다.

HTML

html


  
    backface-visibility: visible;
    backface-visibility: hidden;
  
  
    
      
        
          1
          2
          3
          4
          5
          6
        
      
      
        Since all faces are partially transparent, the back faces (2, 4, 5) are
        visible through the front faces (1, 3, 6).
      
    
    
      
        
          1
          2
          3
          4
          5
          6
        
      
      The three back faces (2, 4, 5) are hidden.

`backface-visibility: visible;`	`backface-visibility: hidden;`
1 2 3 4 5 6 Since all faces are partially transparent, the back faces (2, 4, 5) are visible through the front faces (1, 3, 6).	1 2 3 4 5 6 The three back faces (2, 4, 5) are hidden.

CSS

css

/* Classes that will show or hide the
   three back faces of the "cube" */
.showbf div {
  backface-visibility: visible;
}

.hidebf div {
  backface-visibility: hidden;
}

/* Define the container div, the cube div, and a generic face */
.container {
  width: 150px;
  height: 150px;
  margin: 75px 0 0 75px;
  border: none;
}

.cube {
  width: 100%;
  height: 100%;
  perspective: 550px;
  perspective-origin: 150% 150%;
  transform-style: preserve-3d;
}

.face {
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  border: none;
  line-height: 100px;
  font-family: sans-serif;
  font-size: 60px;
  color: white;
  text-align: center;
}

/* Define each face based on direction */
.front {
  background: rgba(0, 0, 0, 0.3);
  transform: translateZ(50px);
}

.back {
  background: rgba(0, 255, 0, 1);
  color: black;
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgba(196, 0, 0, 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgba(0, 0, 196, 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgba(196, 196, 0, 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgba(196, 0, 196, 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

/* Make the table a little nicer */
th,
p,
td {
  background-color: #eeeeee;
  margin: 0px;
  padding: 6px;
  font-family: sans-serif;
  text-align: left;
}

결과

명세

Specification
CSS Transforms Module Level 2 # backface-visibility-property

브라우저 호환성

같이 보기

CSS 변형 사용하기