backface-visibility(이면가시성)

우리말로 번역해서 더 어려워진 단어, 뒷면을 보여준다는 backface-visibility 속성에 대해 간단히 알아봅니다.

 

 

backface-visibility 소개(뒷면 보기)

backface-visibility 속성은 3D 전환을 제어할 수 있습니다.

즉, 이 속성은 3D transform(전환)과 연관되어 있으며, 입체적인 뒷면의 가시성을 결정하는 속성입니다.

변형이 가해져서 요소의 뒷면이 보여지게 될 때, 이 속성으로 숨기거나 보여지게 할 수 있습니다.

그리고 이 속성을 이용하여 원치 않는 번쩍이는 효과를 숨기게 할 수도 있습니다.

CSS

div { -webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */ backface-visibility: hidden; }

 

backface-visibility 속성값

• visible : 기본값으로 이면을 보여준다.
• hidden : 이면을 숨긴다.

 

아래 예제에서 차이점을 알아봅니다. 자세히 보면 visible 일 때 원치 않은 번쩍임이나 이면이 보일 것입니다.

 

 

지원 현황

출처: https://webclub.tistory.com/227 [Web Club]