backfaceVisibility 속성이란?
backfaceVisibility 속성은 요소의 뒷면(back face)이 사용자를 향할 때 화면에 보이도록 할지 여부를 지정하는 데 사용됩니다. 이 속성은 주로 3D 변환(transform)에서 중요한 역할을 합니다. 예를 들어, 요소를 회전시켰을 때 그 뒷면까지 함께 보여줄 것인지, 아니면 숨길 것인지를 결정할 수 있습니다.
구문(Syntax)
backfaceVisibility 속성을 설정하는 기본 구문은 다음과 같습니다.
object.style.backfaceVisibility = "visible|hidden|initial|inherit";
속성 값(Values)
backfaceVisibility 속성에 사용할 수 있는 값은 다음과 같습니다.
| 번호 | 값 및 설명 |
|---|---|
| 1 | visible 요소의 뒷면을 보이게 설정합니다. 이 값이 기본값(default)입니다. |
| 2 | hidden 요소의 뒷면을 숨깁니다. |
| 3 | initial 해당 속성을 기본 초기값으로 설정합니다. |
| 4 | inherit 부모 요소의 속성 값을 상속받습니다. |
예제(Example)
다음 예제는 backfaceVisibility 속성을 활용하여 버튼 클릭 시 div 요소의 뒷면 표시 여부를 변경하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
position: relative;
height: 80px;
width: 80px;
background-color: lightgreen;
float: left;
text-align: center;
letter-spacing: 0.8px;
margin-bottom:10px;
}
#one {
transform: rotateY(180deg);
backface-visibility: visible;
}
p{
clear:both;
}
</style>
<script>
function visibilityChange(){
document.getElementById("one").style.backfaceVisibility="hidden";
document.getElementById("Sample").innerHTML="뒷면 가시성(backface visibility)이 hidden으로 설정되었습니다.";
}
</script>
</head>
<body>
<div id="one">Lateral Inversion</div>
<div>Lateral inversion</div>
<br>
<p>아래 버튼을 클릭하면 위 div 요소의 뒷면 가시성 값이 변경됩니다.</p>
<button onclick="visibilityChange()">가시성 변경</button>
<p id="Sample"></p>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
[가시성 변경] 버튼을 클릭한 후의 결과 −
버튼을 클릭하면 자바스크립트 함수가 실행되어 첫 번째 div 요소의 backfaceVisibility 값이 hidden으로 변경되고, Y축으로 180도 회전된 요소의 뒷면이 더 이상 화면에 나타나지 않는 것을 확인할 수 있습니다.