The backfaceVisibility property is used to specify whether the back face of an element will be visible or not when faced by the user. It is important only for 3D transforms so that when you rotate the element you want to see its backside or not.
Syntax
Following is the syntax for −
Setting the backfaceVisibility property −
object.style.backfaceVisibility = "visible|hidden|initial|inherit"
Values
Following are the values −
| Sr.No | Value & Description |
|---|---|
| 1 | visible This makes the backside visible and is the default value. |
| 2 | hidden This hides the backside. |
| 3 | Initial For setting this property to initial value. |
| 4 | inherit To inherit the parent property value. |
Example
Let us look at an example for the backfaceVisibility property −
<!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>Output
This will produce the following output −
On clicking the CHANGE VISIBILITY button −
