Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Set whether or not an element should be visible while not facing the screen with JavaScript?
Use the JavaScript backfaceVisibility property to control whether an element should be visible when its back face is turned toward the viewer. This property is particularly useful with CSS 3D transforms and animations.
Syntax
element.style.backfaceVisibility = "visible|hidden|inherit|initial";
Property Values
| Value | Description |
|---|---|
visible |
Default. Back face is visible when turned away from user |
hidden |
Back face is hidden when turned away from user |
inherit |
Inherits value from parent element |
Example: Interactive Backface Visibility Toggle
The following example demonstrates how to toggle the backfaceVisibility property with a rotating element:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 300px;
background: blue;
color: white;
animation: mymove 2s infinite linear alternate;
display: flex;
align-items: center;
justify-content: center;
}
@keyframes mymove {
to {transform: rotateY(180deg);}
}
</style>
</head>
<body>
<p>Check below to display backface</p>
<div id="box">
<h1>Demo</h1>
</div>
<input type="checkbox" onclick="display(this)" checked>backfaceVisibility Property
<script>
function display(x) {
if (x.checked === true) {
document.getElementById("box").style.backfaceVisibility = "visible";
} else {
document.getElementById("box").style.backfaceVisibility = "hidden";
}
}
</script>
</body>
</html>
How It Works
The element rotates continuously using CSS animations. When the checkbox is checked, the back face remains visible during rotation. When unchecked, the element disappears when showing its back face.
Common Use Cases
- Card flip effects: Hide the back of cards during 3D flip animations
- 3D carousels: Control visibility of elements facing away from the viewer
- Rotating galleries: Prevent visual artifacts in 3D image galleries
Browser Compatibility
The backfaceVisibility property is supported in all modern browsers. For older browsers, use vendor prefixes like -webkit-backface-visibility or -moz-backface-visibility.
Conclusion
The backfaceVisibility property is essential for controlling element visibility in 3D transforms. Use "hidden" to prevent visual artifacts and "visible" for transparent or see-through effects.
254 Views
