오브젝트 뒤집기 : 뒷면과 앞면을 정하는 속성 (backface-visibility)

 

 

 

backface-visibility 로 요소 뒤집는 효과

요즘 웹 화면을 보면 마우스를 올렸을 때라든지 오브젝트가 한 축을 기준으로 뒤집어지면서 flip 되는 애니메이션을 많이 보여줍니다. 이때 필요한 css 속성이 backface-visibility 입니다.

​

backface-visibility 는 요소 앞면과 뒷면을 어떻게 보여줄지 정하는 속성으로 하단과 같은 값을 가집니다.

기본값 : visible

visible : 뒷면이 보이게 합니다.
hidden : 뒷면이 보이지 않게 합니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.