w3docs logo

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

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

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.

Browser support

chrome firefox safari opera
36.0+
12.0-35.0 -webkit- 		16.0+
10.0-15.0 -moz- 		4.0+
-webkit- 		23.0+
15.0-22.0 -webkit-

Practice Your Knowledge

What does the CSS backface-visibility property do?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?