Style backfaceVisibility Property
Example
Hide the backside of a rotating <div> element:
// Code for Chrome, Safari, Opera
document.getElementById("myDIV").style.WebkitBackfaceVisibility = "hidden";
// Standard syntax
document.getElementById("myDIV").style.backfaceVisibility = "hidden";Try it Yourself »
Definition and Usage
The backfaceVisibility property defines whether or not an element should be visible when not facing the screen.
This property is useful when an element is rotated, and you do not want to see its backside.
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 | |||||
|---|---|---|---|---|---|
| backfaceVisibility | 36.0 12.0 Webkit |
10.0 | 16.0 10.0 Moz |
4.0 Webkit | 23.0 15.0 Webkit |
Note: Chrome (12-35), Safari and Opera 15+ support an alternative, the WebkitBackfaceVisibility property.
Syntax
Return the backfaceVisibility property:
object.style.backfaceVisibility
Set the backfaceVisibility property:
object.style.backfaceVisibility="visible|hidden|initial|inherit"
Property Values
| Value | Description |
|---|---|
| visible | Default value. The backside is visible |
| hidden | The backside is not visible |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Technical Details
| Default Value: | visible |
|---|---|
| Return Value: | A String, representing the backface-visibility property of an element |
| CSS Version | CSS3 |
Related Pages
CSS reference: backface-visibility property
Style Object
