CSS backface-visibility Property
The backface-visibility is a CSS property that 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¶
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;
/* Safari 4.0 - 8.0 */
animation: element 2s infinite linear alternate;
}
/* Safari 4.0 - 8.0 */
@-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;
/* Safari 4.0 - 8.0 */
animation: element 2s infinite linear alternate;
}
/* Safari 4.0 - 8.0 */
@-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¶
| Value | Description | |
|---|---|---|
| visible | The backface is visible. It is the default value. |
0 Comments
CAN FEEDBACK
Emoji