CSS backface-visibility Property

A backface is a reversed mirror image of the element's front side.

The backface-visibility shows the element's back face to the user.

This property is used with rotated elements.

Example

#

A rotated element with backface-visibility set to visible.

Backface
<style>
  .backface {
    position: relative;
    width: 100px;
    height: 60px;
    background-color: lightblue;
    transform: rotateY(180deg);
    text-align: center;
    padding-top: 40px;
    backface-visibility: visible;
  }
</style>

<div class="backface">Backface</div>

Syntax

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

Values

#

Value Description
visible Default. Shows backside
hidden Hides the backside
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different backface-visibility values.

Backface
<style>
  .backface-example {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: lightblue;
    transform: rotateY(180deg);
    text-align: center;
    padding-top: 35px;
    backface-visibility: visible;
  }
</style>

<div class="backface-example">Backface</div>

Did you know?

Did you know?

Images and backface-visibility

Images support the backface-visibility property. This example has the original image and a rotated version that shows its backface.

Original Image:
 
Rotated Image:
<style>
  .backface-image {
    transform: rotateY(180deg);
    backface-visibility: visible;
  }

  .image-container {
    display: flex;
  }
</style>

<div class="image-container">
  <div>
    Original Image:<br>
    <img src="/img/css/vangogh.jpg">
  </div>
  &nbsp;
  <div>
    Rotated Image:<br>
    <img src="/img/css/vangogh.jpg" class="backface-image">
  </div>
</div>

Browser support

This table shows when backface-visibility support started for each browser.

Chrome
36.0 Jul 2014
Firefox
16.0 Oct 2012
IE/Edge
10.0 Sep 2012
Opera
23.0 Jul 2013
Safari
9.0 Sep 2015

You may also like

Guides