CSS backface-visibility Property

❮ Previous Complete CSS Reference Next ❯

Example

Hide and show the back face of two rotated <div> elements:

#div1 {
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}

#div2 {
-webkit-backface-visibility: visible; /* Safari */
backface-visibility: visible;
}

Try it Yourself »

Definition and Usage

The backface-visibility property defines whether or not the back face of an element should be visible when facing the user.

The back face of an element is a mirror image of the front face being displayed.

This property is useful when an element is rotated. It lets you choose if the user should see the back face or not.

To better understand this property, view a demo.

Default value:	visible
Inherited:	no
Animatable:	no. Read about animatable
Version:	CSS3
JavaScript syntax:	object.style.backfaceVisibility="hidden" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
backface-visibility	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	4.0 -webkit-	23.0 15.0 -webkit-

CSS Syntax

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

Property Values

Value	Description	Demo
visible	Default value. The backside is visible	Play it »
hidden	The backside is not visible	Play it »
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

HTML DOM reference: backfaceVisibility property