CSS backface-visibility Property

Backface visibility The property determines whether or not the rear face of an element is shown to the user. It is a mirror image of the front face that is shown to the user as the back face of an element. It is useful when an element is rotated since it determines whether or not the rear face of an element is visible.

Syntax

backface-visibility: visible | hidden | initial | inherit;

Example

<!DOCTYPE html>
<html>
<head>
<style>
.box {
    position: relative;
    height: 80px;
    width: 80px;
    background-color: #00ab55;
    transform: rotateY(180deg);
}

.hidden {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.visible {
    -webkit-backface-visibility: hidden;
    backface-visibility: visible;
}
</style>
</head>
<body>

<p>This div element has "backface-visibility: hidden", and the back face of the div element is invisible:</p>
<div class="box hidden"></div>

<p>This div element has "backface-visibility: visible", and the back face of the div element shows a mirror image of the front face:</p>
<div class="box visible"></div>

</body>
</html>

Preview

Property Values

Value	Description
visible	This is the default setting. When an element is facing the user, the rear face is displayed.
Hidden	When facing the user, this attribute indicates that the rear face of an element is concealed.
Initial	It restores the property's default value.
inherit	Inherits this property from its parent element.

Supported Browsers

Element	Chrome	Firefox	Safari	Edge / IE	Opera
backface-visibility	36.0 12.0 -webkit-	16.0 10.0 -moz-	4.0 -webkit-	10.0	23.0 15.0 -webkit-

More Example

backface-visibility: visible;

backface-visibility: hidden;

animation-timing-function

background

CSS backface-visibility Property

Syntax

Example

Property Values

Supported Browsers

More Example

Links

Tutorials

Connect with us