JavaScript의 backfaceVisibility 속성을 사용하면 요소가 화면을 향하고 있지 않을 때(즉, 뒷면이 보이는 상태일 때) 해당 요소를 표시할지 여부를 설정할 수 있습니다.
예제
다음 코드를 직접 실행해 보면서 JavaScript에서 backfaceVisibility 속성을 구현하는 방법을 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 300px;
background: blue;
color: black;
animation: mymove 2s infinite linear alternate;
}
@keyframes mymove {
to {transform: rotateY(180deg);}
}
</style>
</head>
<body>
<p>아래 체크박스를 선택하여 뒷면 표시 여부를 확인하세요</p>
<div id="box">
<h1>Demo</h1>
</div>
<input type="checkbox" onclick="display(this)" checked>backfaceVisibility 속성
<script>
function display(x) {
if (x.checked === true) {
document.getElementById("box").style.backfaceVisibility = "visible";
} else {
document.getElementById("box").style.backfaceVisibility = "hidden";
}
}
</script>
</body>
</html>동작 방식 설명
위 예제에서 div 요소는 CSS 애니메이션(@keyframes mymove)에 의해 Y축을 기준으로 180도 회전합니다. 이때 요소가 화면 반대쪽으로 돌아가면 원래는 뒷면이 그대로 보이게 됩니다.
체크박스를 선택하면 display() 함수가 호출되어 backfaceVisibility 값이 visible로 설정되어 뒷면이 표시되고, 체크를 해제하면 hidden으로 변경되어 뒷면이 숨겨집니다. 이 속성은 카드 뒤집기 효과나 3D 회전 애니메이션을 구현할 때 특히 유용하게 활용됩니다.