backfaceVisibility 속성은 사용자가 보았을 때 요소의 뒷면을 볼 수 있는지 여부를 지정하는 데 사용됩니다. 요소를 회전할 때 요소의 뒷면을 보고 싶은지 여부를 확인하려면 3D 변환에만 중요합니다.
구문
다음은 −
의 구문입니다.backfaceVisibility 속성 설정 -
object.style.backfaceVisibility = "visible|hidden|initial|inherit"
값
다음은 값입니다 -
| Sr.No | 값 및 설명 |
|---|---|
| 1 | 보임 이렇게 하면 뒷면이 보이게 되며 기본값입니다. |
| 2 | 숨김 이것은 뒷면을 숨깁니다. |
| 3 | 초기 이 속성을 초기 값으로 설정합니다. |
| 4 | 상속 상위 속성 값을 상속합니다. |
예시
backfaceVisibility 속성에 대한 예를 살펴보겠습니다 -
<!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="The backface visibility is now set to hidden.";
}
</script>
</head>
<body>
<div id="one">Lateral Inversion</div>
<div>Lateral inversion</div>
<br>
<p>Click the below button to change the above div backface visibility value</p>
<button onclick="visibilityChange()">CHANGE VISIBILITY</button>
<p id="Sample"></p>
</body>
</html> 출력
이것은 다음과 같은 출력을 생성합니다 -
CHANGE VISIBILITY 버튼을 클릭하면 -
