CSS3 : backface-visibility 속성(image flip 구현)

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 일 때 원치 않은 번쩍임이나 이면이 보일 것입니다.

See the Pen backface-visibility by jaeheekim (@jaehee) on CodePen.

지원 현황

IE	크롬	파이어폭스	사파리	오페라
IE10+	지원	지원	지원	지원

• 사파리는 Vendor Prefix 인 -webkit- 이 필요합니다.

참고 관련 링크

1. W3C - CSS3 backface-visibility Property
2. backface-visibility

backface-visibility 를 이용한 image 및 box contents flip (마우스 오버시)

See the Pen xwNMWp by jaeheekim (@jaehee) on CodePen.

Jaehee's WebClub