backface-visibility property - CSS Reference

backface-visibility property CSS Reference

Definition and Usage

The CSS backface-visibility property determines whether or not the back face of the element is visible when facing the user. The back face of an element always is a transparent background, letting, when visible, a mirror image of the front face be displayed.

There are cases when we do not want the front face of an element to be visible through the back face, like when doing a flipping card effect (setting two elements side-to-side).

This property has no effect on 2D transforms as there is no perspective.

Initial visible
Applies to transformable elements
Inherited no
Media visual
Computed Value as specified
Animatable no
Canonical order the unique non-ambiguous order defined by the formal grammar

Syntax

Formal syntax:  visible | hidden

backface-visibility: visibility
backface-visibility: visible
backface-visibility: hidden

Values

visibility

Is a keyword indicating if the backface must be visible or not. It can have the following values:

visible meaning that the back face is visible, allowing the front face to be displayed mirrored;
hidden meaning that the back face is not visible, hiding the front face.

Examples

backface-visibility: visible;	backface-visibility: hidden;
1 2 3 4 5 6	1 2 3 4 5 6 Though not opaque, the front sides don't allow the back faces of the hidden sides to be displayed.