CSS Reference Property

backface-visibility

The backface-visibility property determines whether or not the “back” side of a transformed element is visible when facing the viewer.

The back face of an element usually has a transparent background, letting, when visible, a mirror image of the front face be displayed.

It is used in conjunction with CSS transforms when an element is rotated in three-dimensional space so that its front face no longer faces towards the screen, and its back face is facing it instead. For example, applying a rotation about the y-axis of 180° (for instance) would cause the back side of the element to face the viewer. It has no effect on two-dimensional transforms.

This property is useful when you place two elements back-to-back, as you would to create a playing card. When the card is flipped, you wouldn’t want the content of the front face to be visible through the back face. Without this property, the front and back elements could switch places at times during an animation to flip the card. It is also useful when creating cubes in the three-dimensional space. See the Live Demo section below for a live example.

Official Syntax

  • Syntax:

    backface-visibility: visible | hidden
  • Initial: visible
  • Applies To: transformable elements
  • Animatable: no

Values

visible
Indicates that the back face of the element is visible, and thus the front face shows through it.
hidden
Indicates that the back face is hidden and therefore the front face does not show through.

Examples

In this example, we’re going to create a card flip example using the backface-visibility property. The markup consists of a container that contains two elements that we’re going to stack on top of each other, back-to-back. We’re going to apply the backface-visibility property to these two elements, and then when the container is hovered, the two elements are going to be rotated in three-dimensional space, thus showing the “other side of the card”. In the live demo below, you can see this example live.

<div class="container">
    <div class="card">
        <div class="face front">Front</div>
        <div class="face back">Back</div>
    </div>
</div>
                

The CSS with comments explaining each step is the following:

.container {
    /* general styles here... */
    /* activate 3D space */
    perspective: 800px;
}

.card {
    /* general styles here... */
    position: relative;
    transition: all .4s linear;
    /* allow child elements to be positioned in 3D space of their own */
    transform-style: preserve-3d;
}

.face {
    /* general styles go here... */
   /* position faces absolutely so that they stack on top of each other */
    position: absolute;
    width: 100%;
    height: 100%;
    
    /* prevent the front face from showing through the back */
    backface-visibility: hidden;
}

.back {
    /* ... */
    /* initially rotate the element in the back so that when the card is flipped, it faces the viewer */
    transform: rotateY(180deg);
}

/* when the card is hovered, rotate it. This will allow the back face to face the viewer. */
.card:hover {
    transform: rotateY(180deg);
}
                

Check out the live demo in the next section.

Live Demo

Hover over the following box in the following example to see it flip in a card-like effect. Try changing the backface-visibility value to visible to see how it affects the transformation.

View this demo on the Codrops Playground

The following example shows two cubes in three-dimensional space. The first one on the left shows the cube with backface-visibility: visible, and the second one on the right shows the cube with backface-visibility: hidden.

View this demo on the Codrops Playground
The cubes are from David DeSandro’s Intro to CSS 3D transforms.

Browser Support

CSS3 3D Transforms

Method of transforming an element in the third dimension using the `transform` property. Includes support for the `perspective` property to set the perspective in z-space and the `backface-visibility` property to toggle display of the reverse side of a 3D-transformed element.

W3C Working Draft

Supported from the following versions:

Desktop

  • 36
  • 16
  • 10
  • 23
  • 9

Mobile / Tablet

  • 9.0
  • 56
  • No
  • 59
  • 54

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Further Reading

Written by

Last updated December 11, 2016 at 10:12 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.