CSS backface-visibility

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 "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

<!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>

In the above-mentioned example the "visible" value is specified.

Now let’s see an example where the element is specified by the "hidden" value.

Example

<!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 default value.
hidden The backface is not visible.
initial Sets the property to its default value.
inherit Inherits the property from its parent element.

Browser support

36.0+
12.0-35.0 -webkit-
12.0+ 16.0+
10.0-15.0 -moz-
4.0+
-webkit-
23.0+
15.0-22.0 -webkit-

Practice Your Knowledge

The "___" value makes the back face hidden effectively.




Related articles