W3docs
en
Log in

CSS backface-visibility Property

The backface-visibility defines whether the back face of an element is visible to the user or hidden. Find some examples and try them for yourself.

The backface-visibility property defines whether the back face of an element should be visible or not. The back face is the back side of the box, visible when the element is rotated 180 degrees around the Y-axis. If the element is rotated, you can choose to show the back face to the user or hide it. 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 hides the back face.

Initial Valuevisible
Applies toTransformable elements.
InheritedNo.
AnimatableNo.
VersionCSS3
DOM Syntaxobject.style.backfaceVisibility = "hidden";

Syntax

Syntax of CSS backface-visibility

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

Example of the backface-visibility property with the "visible" value:

Example of CSS backface-visibility with 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;
        transform-style: preserve-3d;
        -webkit-animation: element 2s infinite linear alternate;
        animation: element 2s infinite linear alternate;
      }
      @-webkit-keyframes element {
        to {
          -webkit-transform: rotateY(180deg);
        }
      }
      @keyframes element {
        to {
          transform: rotateY(180deg);
        }
      }
    </style>
  </head>
  <body>
    <h2>Backface-visibility property example</h2>
    <div class="element">
      <h2>Hello world!</h2>
    </div>
  </body>
</html>
Try it Yourself »

Example of the backface-visibility property with the "hidden" value:

Example CSS backface-visibility with 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;
        transform-style: preserve-3d;
        -webkit-animation: element 2s infinite linear alternate;
        animation: element 2s infinite linear alternate;
      }
      @-webkit-keyframes element {
        to {
          -webkit-transform: rotateY(180deg);
        }
      }
      @keyframes element {
        to {
          transform: rotateY(180deg);
        }
      }
    </style>
  </head>
  <body>
    <h2>An example with hidden value</h2>
    <div class="element">
      <h2>Hello world!</h2>
    </div>
  </body>
</html>
Try it Yourself »

Values

ValueDescriptionPlay it
visibleThe backface is visible. It is default value.Play it »
hiddenThe backface is not visible.Play it »
initialSets the property to its default value.
inheritInherits the property from its parent element.

Practice

Practice

What does the CSS backface-visibility property do?