CSS backface-visibility Property
Example
Hide and show the back face of two rotated <div> elements:
#div1
{
backface-visibility: hidden;
}
#div2
{
backface-visibility: visible;
}
Try it Yourself »
Definition and Usage
The backface-visibility property defines whether or not the back face of an element
should be visible when facing the user.
The back face of an element is a mirror image of the front face being displayed.
This property is useful when an element is rotated. It lets you choose if the user should see the back face or not.
To better understand this property, view a demo.
| Default value: | visible |
|---|---|
| Inherited: | no |
| Animatable: | no. Read about animatable |
| Version: | CSS3 |
| JavaScript syntax: | object.style.backfaceVisibility="hidden" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.
| Property | |||||
|---|---|---|---|---|---|
| backface-visibility | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
CSS Syntax
backface-visibility: visible|hidden|initial|inherit;
Property Values
| Value | Description | Play it |
|---|---|---|
| visible | Default value. The backside is visible | Play it » |
| hidden | The backside is not visible | Play it » |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Related Pages
HTML DOM reference: backfaceVisibility property
