- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Style backfaceVisibility Property
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 −
Updated on: 15-Feb-2021
21 Views
Advertisements