CSS backface-visibility

The CSS backface-visibility property controls whether the back face of an element is shown when that element is turned away from the viewer. Every element has two faces: the front (what you normally see) and the back, which becomes visible when the element is rotated past 90 degrees around the X- or Y-axis in 3D space. By default the back is a mirror image of the front, but with this property you can hide it entirely.

This property only has a visible effect inside a 3D transform context — that is, when the element (or its parent) is rotated using transform with rotateX(), rotateY(), or rotate3d(), usually combined with transform-style: preserve-3d on the parent. It accepts two keyword values:

visible (the default) — the back face is drawn, appearing as a mirrored version of the front.
hidden — the back face is not drawn. When the element flips past edge-on, it disappears instead of showing its reverse side.

The most common use is building flip-card interfaces, where two elements are stacked back-to-back and rotated 180 degrees. Setting backface-visibility: hidden on both keeps the back of the front face from bleeding through, so only the side currently facing the viewer is shown.

The backface-visibility property is one of the CSS3 properties.

Initial Value	visible
Applies to	Transformable elements.
Inherited	No.
Animatable	No.
Version	CSS3
DOM Syntax	object.style.backfaceVisibility = "hidden";

Syntax

Syntax of CSS backface-visibility

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

In the examples below, a square is animated to spin around the Y-axis. With visible, you can read the text mirror-reversed when the box turns its back to you. With hidden, the box vanishes during the half of the rotation when its back faces you. Watch the difference as each box spins.

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 »

Building a flip card

A practical use of backface-visibility is a card that flips to reveal its other side on hover. The front and back are stacked in the same place; hidden stops the front's reverse side from showing through once the card turns past 90 degrees.

<!DOCTYPE html>
<html>
  <head>
    <title>Flip card</title>
    <style>
      .scene {
        width: 200px;
        height: 260px;
        perspective: 800px;
      }
      .card {
        width: 100%;
        height: 100%;
        position: relative;
        transform-style: preserve-3d;
        transition: transform 0.6s;
      }
      .scene:hover .card {
        transform: rotateY(180deg);
      }
      .card-face {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: #fff;
        /* Hide the mirrored reverse of each face */
        backface-visibility: hidden;
      }
      .card-front {
        background: #1c87c9;
      }
      .card-back {
        background: #8ebf42;
        transform: rotateY(180deg);
      }
    </style>
  </head>
  <body>
    <div class="scene">
      <div class="card">
        <div class="card-face card-front">Front</div>
        <div class="card-face card-back">Back</div>
      </div>
    </div>
  </body>
</html>

Tips and gotchas

backface-visibility does nothing in a flat (2D) layout. The element must be part of a 3D transform — give the parent transform-style: preserve-3d and use perspective so the rotation reads as depth.
In a flip card, set backface-visibility: hidden on both faces. Forgetting it on one face lets its mirror image flash through the other side.
The back face is a true mirror of the front, so any text on it reads reversed when visible.
The property is not animatable — it switches states instantly — but the rotation that reveals or hides the back face can be animated with transform and CSS animations.

Values

Value	Description	Play it
visible	The backface is visible. It is the 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.

Practice

What does the CSS backface-visibility property do?

It defines whether or not the back face of an element should be visible when facing the user.It defines the font size of an element.It defines the color of an element's border.It prevents an inverted copy of an element's front face from being displayed.