backfaceVisibility 예제
<style>
#hz {
width: 300px;
height: 100px;
background: tomato;
color: white;
-webkit-animation: hzmove 2s infinite linear alternate; /* Chrome, Safari, Opera */
animation: hzmove 2s infinite linear alternate;
}
@-webkit-keyframes hzmove { /* Chrome, Safari, Opera */
to {-webkit-transform: rotateY(180deg);}
}
@keyframes hzmove {
to {transform: rotateY(180deg);}
}
</style>
<div id="hz">
<h1>홈짱닷컴 Homzzang.com</h1>
</div>
<input type="checkbox" onclick="homzzang(this)" checked>backface-visibility 체크유무 비교
<script>
function homzzang(x) {
if (x.checked === true) {
document.getElementById("hz").style.WebkitBackfaceVisibility = "visible"; // Chrome, Safari, Opera
document.getElementById("hz").style.backfaceVisibility = "visible";
} else {
document.getElementById("hz").style.WebkitBackfaceVisibility = "hidden"; // Chrome, Safari, Opera
document.getElementById("hz").style.backfaceVisibility = "hidden";
}
}
</script>
결과보기
backfaceVisibility 정의
요소회전 중 뒷면보이기 여부 설정/반환
1.
IE10 이상 주요 최신 브라우저 모두 지원.
2.
CSS3
backfaceVisibility 구문
[반환]
object.style.backfaceVisibility
[설정]
object.style.backfaceVisibility = "visible|hidden|initial|inherit"
[속성값]
visible
뒷면 보이기. (기본값)
hidden
뒷면 숨기기.
initial
이 속성의 기본값으로 자동 설정.
inherit
부모요소 속성값 상속.
