A backface is a reversed mirror image of the element's front side.
The backface-visibility shows the element's back face to the user.
This property is used with rotated elements.
A rotated element with backface-visibility set to visible.
<style>
.backface {
position: relative;
width: 100px;
height: 60px;
background-color: lightblue;
transform: rotateY(180deg);
text-align: center;
padding-top: 40px;
backface-visibility: visible;
}
</style>
<div class="backface">Backface</div>
backface-visibility: visible | hidden | initial | inherit;
| Value | Description |
|---|---|
| visible | Default. Shows backside |
| hidden | Hides the backside |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see the different backface-visibility values.
<style>
.backface-example {
position: relative;
width: 100px;
height: 100px;
background-color: lightblue;
transform: rotateY(180deg);
text-align: center;
padding-top: 35px;
backface-visibility: visible;
}
</style>
<div class="backface-example">Backface</div>
Images support the backface-visibility property.
This example has the original image and a rotated version that shows its backface.
<style>
.backface-image {
transform: rotateY(180deg);
backface-visibility: visible;
}
.image-container {
display: flex;
}
</style>
<div class="image-container">
<div>
Original Image:<br>
<img src="/img/css/vangogh.jpg">
</div>
<div>
Rotated Image:<br>
<img src="/img/css/vangogh.jpg" class="backface-image">
</div>
</div>
This table shows when backface-visibility support started for each browser.
 Chrome
|
36.0 | Jul 2014 |
 Firefox
|
16.0 | Oct 2012 |
 IE/Edge
|
10.0 | Sep 2012 |
 Opera
|
23.0 | Jul 2013 |
 Safari
|
9.0 | Sep 2015 |
