CSS3 이면가시성(backface-visibility) 속성

괜스레 우리말로 번역한다고 더 어려워진 단어 같군요. backface-visibility 속성을 이용하면 어색한 CSS 효과를 수정할 수 있습니다.

backface-visibility 속성 소개

이 속성은 3D transform(변형)과 연관되어 있으며, 입체적인 모습의 뒷면의 가시성을 결정하는 속성이다. 즉, 변형이 가해져 요소의 뒷면이 보여지게 될때, 이 속성으로 숨기거나 보여지게 할 수 있다. 대부분 어색한 번쩍이는 효과로 인해 이를 숨기고 싶어할 것이다.

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

backface-visibility 속성값

• hidden : 이면을 숨김
• visible : 기본값으로, 이면을 보여줌

아래에서 예제에서 차이점을 살펴볼 수 있다. 자세히 들여다보면 visible일때 원치 않은 반짝임이나 이면이 보일것이다.

See the Pen CSS3 backface-visibility by Douglas Ham (@uzugoer) on CodePen.

자바스크립트 문법

object.style.backfaceVisibility="hidden"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
IE10+	지원	지원	지원	지원

Safari에서는 -webkit- 프리픽스가 필요하다.

참고 링크 :

• CSS3 backface-visibility Property
• backface-visibility