CSS property: -webkit-backface-visibility

Description

Determines whether or not a transformed element is visible when it is not facing the screen.

Use this property to specify whether or not an element is visible when it is not facing the screen. For example, if the identity transform is set, an element faces the screen; otherwise, it may face away from the screen. For example, applying a rotation about y of 180 degrees in the absence of any other transforms causes an element to face away from the screen.

This property is useful when you place two elements back to back, as you would do to create a playing card. Without this property, the front and back elements could at times switch places during an animation to flip the card. Another example is creating a box out of six elements whose outside and inside faces can be viewed. This is useful when creating the backdrop for a three-dimensional stage.

Syntax

-webkit-backface-visibility: <visibility>;

Values

<visibility>

Determines whether or not the back face of a transformed element is visible.

visible (by default)The element is always visible even when it is not facing the screen.
hiddenThe element is invisible if it is not facing the screen.

Versions