backface-visibility
CSS backface-visibility Property
The backface-visibility is a CSS property which defines whether the back face of an element should be visible or not. The back face of an element is a mirror image of the front. If the element is rotated, you can choose to show the back face of an element to the user or not. Two values specify this property: visible and hidden.
The backface-visibility property is one of the CSS3 properties.
The “visible” value makes the back face visible to the user. The “hidden” value makes the rear face hidden effectively.
| 类目 | 类目 |
|---|---|
| Initial Value | visible |
| Applies to | Transformable elements. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.backfaceVisibility = “hidden”; |
Syntax
Syntax
backface-visibility: visible | hidden | initial | inherit;
Example of the backface-visibility property with the “visible” value:
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.element {
width: 200px;
height: 200px;
background: #666;
color: #eee;
backface-visibility: visible;
-webkit-animation: element 2s infinite linear alternate;
animation: element 2s infinite linear alternate;
}
@-webkit-keyframes element {
to {
-webkit-transform: rotateY(180deg);
}
}
</style>
</head>
<body>
<h2>Backface-visibility property example</h2>
<div class="element">
<h2>Hello world!</h2>
</div>
</body>
</html>
Example of the backface-visibility property with the “hidden” value:
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.element {
width: 200px;
height: 200px;
background: #1c87c9;
color: #8ebf42;
backface-visibility: hidden;
-webkit-animation: element 2s infinite linear alternate;
animation: element 2s infinite linear alternate;
}
@-webkit-keyframes element {
to {
-webkit-transform: rotateY(180deg);
}
}
</style>
</head>
<body>
<h2>An example with hidden value</h2>
<div class="element">
<h2>Hello world!</h2>
</div>
</body>
</html>
Values
Values
| Value | Description | Play it |
|---|---|---|
| visible | The backface is visible. It is default value. | Play it » |
| hidden | The backface is not visible. | Play it » |
| initial | Sets the property to its default value. | |
| inherit | Inherits the property from its parent element. |