괜스레 우리말로 번역한다고 더 어려워진 단어 같군요. backface-visibility 속성을 이용하면 어색한 CSS 효과를 수정할 수 있습니다.
backface-visibility 속성 소개
이 속성은 3D transform(변형)과 연관되어 있으며, 입체적인 모습의 뒷면의 가시성을 결정하는 속성이다. 즉, 변형이 가해져 요소의 뒷면이 보여지게 될때, 이 속성으로 숨기거나 보여지게 할 수 있다. 대부분 어색한 번쩍이는 효과로 인해 이를 숨기고 싶어할 것이다.
CSS
div {
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;
}
backface-visibility 속성값
- hidden : 이면을 숨김
- visible : 기본값으로, 이면을 보여줌
아래에서 예제에서 차이점을 살펴볼 수 있다. 자세히 들여다보면 visible일때 원치 않은 반짝임이나 이면이 보일것이다.
자바스크립트 문법
JavaScript
object.style.backfaceVisibility="hidden"
지원 현황
| 인터넷익스플로우 | 파이어폭스 | 사파리 | 크롬 | 오페라 |
|---|---|---|---|---|
| IE10+ | 지원 | 지원 | 지원 | 지원 |
Safari에서는 -webkit- 프리픽스가 필요하다.
참고 링크 :
