CSS backface-visibility Property
Example
Hide and show the back face of two rotated <div> elements:
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
#div2 {
-webkit-backface-visibility: visible; /* Safari */
backface-visibility: visible;
}
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.
We can use the rotateY(180deg)
to rotate the element on the
Y-axis, so that it will show the back face of element.
The visibility of this back face is controlled by this property.
Default value: | visible |
---|---|
Inherited: | no |
Animatable: | no. |
Version: | CSS3 |
JavaScript syntax: | object.style.backfaceVisibility="hidden" |
- Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
-
object - object in javascript means the element on which
backface-visibility
is applied. -
Animatable - "Animatable = no" means that it cannot be
animated with CSS
@keyframes
.
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- |
4.0 -webkit- | 23.0 15.0 -webkit- |
CSS Syntax
Property Values
Value | Description | Demo |
---|---|---|
visible | Default value. The backside is visible | |
hidden | The backside is not visible | |
initial | Sets this property to its default value. | |
inherit | Inherits this property from its parent element. |
Comments
Post a Comment