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
Selected Reading
CSS backface-visibility Property
The CSS backface-visibility property determines whether an element should be visible when it is rotated away from the user and its back face is showing. This property is particularly useful in 3D transformations and animations.
Syntax
selector {
backface-visibility: visible | hidden;
}
Possible Values
| Value | Description |
|---|---|
visible |
The back face is visible when turned towards the user (default) |
hidden |
The back face is hidden when turned towards the user |
Example 1: Visible Backface
The following example shows an element with backface-visibility set to visible −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
perspective: 1000px;
margin: 50px;
}
.card {
width: 200px;
height: 120px;
background-color: #3498db;
color: white;
display: flex;
align-items: center;
justify-content: center;
transform: rotateY(180deg);
backface-visibility: visible;
font-size: 18px;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="container">
<div class="card">Back Side Visible</div>
</div>
</body>
</html>
A blue card rotated 180 degrees showing its back face with reversed text "Back Side Visible".
Example 2: Hidden Backface
The following example demonstrates backface-visibility set to hidden −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
perspective: 1000px;
margin: 50px;
}
.card {
width: 200px;
height: 120px;
background-color: #e74c3c;
color: white;
display: flex;
align-items: center;
justify-content: center;
transform: rotateY(180deg);
backface-visibility: hidden;
font-size: 18px;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="container">
<div class="card">This Won't Show</div>
</div>
</body>
</html>
No visible element appears because the card's backface is hidden when rotated 180 degrees.
Conclusion
The backface-visibility property is essential for creating smooth 3D effects and card-flip animations. Use hidden to prevent elements from showing their reverse side during rotations.
Updated on: 2026-03-15T12:36:43+05:30
108 Views
Advertisements