목차
backface-visibility 예제 - 3D 요소 뒷면 노출 여부
backface-visibility 정의
backface-visibility 구문
backface-visibility 관련 주소
backface-visibility 예제 - 3D 요소 뒷면 노출 여부
<style>
div {
position: relative;
width: 300px;
height: 60px;
line-height:60px;
text-align:center;
background-color: tomato;
-webkit-transform: rotateY(180deg); /* Chrome, Safari, Opera */
transform: rotateY(180deg);
}
#hz1 {
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;
}
#hz2 {
-webkit-backface-visibility: visible; /* Chrome, Safari, Opera */
backface-visibility: visible;
}
</style>
<div id="hz1">hz1 : 홈짱닷컴 Homzzang.com</div>
<div id="hz2">hz2 : 홈짱닷컴 Homzzang.com</div>
결과보기
backface-visibility 정의
3D 요소 뒷면 노출 여부 지정.
1.
기본값: visible
상속여부: X
애니효과: ?
CSS버전: CSS3
JS구문: 아직 backfaceVisibility 속성 안 만들어진 듯 함.
2.
IE10 이상 주요 최신 브라우저 지원 .
backface-visibility 구문
selector {backface-visibility: visible|hidden|initial|inherit|unset;}
[속성값]
visible
뒷면이 사용자 향하면 보임. (기본값)
hidden
뒷면이 사용자 향해도 안 보임.
즉, 뒷면이 뒤에 있으면 안 보임.
initial
이 속성의 기본값으로 설정.
inherit
부모요소의 속성값 상속.
unset
상속값 존재하면 상속값을, 그렇지 않으면 초기값 사용. 자세히보기 .
backface-visibility 관련 주소
MDN backface-visibility 강의
https://developer.mozilla.org/ko/docs/Web/CSS/backface-visibility
주소 복사
랜덤 이동