The backfaceVisibility property is the deciding factor that would make an element visible or invisible when the element is not facing the screen. This property is helpful when an element is rotated, and its backside needs to be hidden.
Syntax:
- Return the backfaceVisibility property:
object.style.backfaceVisibility
- Set the backfaceVisibility property:
object.style.backfaceVisibility = "visible|hidden|initial| inherit"
Property Values:
- visible: The visible value is the Default value. It helps in making the backside visible.
- hidden: The hidden value would make the backside invisible.
- initial: The initial value sets this property to its default value.
- inherit: It is used to inherit the property from its parent element.
Return Value: It returns a string, which represents the behavior of backfaceVisibility property of an element.
Example-1: Sets backfaceVisibility from visible to hidden.
<!DOCTYPE html> <html>
<head>
<title>
HTML DOM Style backfaceVisibility Property
</title>
<style>
div {
width: 200px;
height: 200px;
background: green;
color: white;
/* Chrome, Safari, Opera */
-webkit-animation: mymove 3s infinite linear alternate;
animation: mymove 3s infinite linear alternate;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
to {
-webkit-transform: rotateX(180deg);
}
}
@keyframes mymove {
to {
transform: rotateX(180deg);
}
}
</style>
</head>
<body>
<p>
Select/deselect the checkbox to change the
backface-visibility of the animated element:
</p>
<div id="myGFG">
<h1>HEY GEEKS</h1>
</div>
<input type="checkbox" onclick="flip(this)" checked>
backface-visibility
<script>
function flip(x) {
if (x.checked === true) {
// Code for Chrome, Safari, Opera
document.getElementById(
"myGFG").style.WebkitBackfaceVisibility =
"visible";
document.getElementById(
"myGFG").style.backfaceVisibility =
"visible";
} else {
// Code for Chrome, Safari, Opera
document.getElementById(
"myGFG").style.WebkitBackfaceVisibility =
"hidden";
document.getElementById(
"myGFG").style.backfaceVisibility =
"hidden";
}
}
</script>
</body>
</html>
|
Output:
- Before hidden:
- After hidden:
Example-2: Sets backfaceVisibility from visible to hidden.
<!DOCTYPE html> <html>
<head>
<title>
HTML DOM Style backfaceVisibility Property
</title>
<style>
div {
width: 100px;
height: 100px;
background: green;
color: white;
-webkit-animation: mymove 2s infinite linear alternate;
/* Chrome, Safari, Opera */
animation: mymove 2s infinite linear alternate;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
to {
-webkit-transform: rotateY(180deg);
}
}
@keyframes mymove {
to {
transform: rotateY(180deg);
}
}
</style>
</head>
<body>
<p>
Select/deselect the checkbox to change the
backface-visibility of the animated element:
</p>
<div id="myGFG">
<h1>GEEKS FOR GEEKS</h1>
</div>
<input type="checkbox" onclick="flip(this)" checked>
backface-visibility
<script>
function flip(x) {
if (x.checked === true) {
// Code for Chrome, Safari, Opera
document.getElementById(
"myGFG").style.WebkitBackfaceVisibility =
"visible";
document.getElementById(
"myGFG").style.backfaceVisibility =
"visible";
} else {
// Code for Chrome, Safari, Opera
document.getElementById(
"myGFG").style.WebkitBackfaceVisibility =
"hidden";
document.getElementById(
"myGFG").style.backfaceVisibility =
"hidden";
}
}
</script>
</body>
</html>
|
Output:
- Before hidden:
- After hidden:
Note: Chrome version (12-35), Safari new updated versions and Opera 15+ versions support an alternative property called the “WebkitBackfaceVisibility property”.
Supported Browsers: The browser supported by DOM Style backfaceVisibility Property are listed below:
- Google Chrome 36.0 and above
- Internet Explorer 10.0 and above
- Edge 12 and above
- Mozilla Firefox 16.0 and above
- Opera 23.0 and above
- Apple Safari 15.4 and above