CSS3 backface-visibility Property

The backface-visibility property is currently only supported in Internet Explorer 10+ and Firefox. Opera 15+, Chrome, and Safari support an alternative, the -webkit-backface-visibility property.

The backface-visibility property defines whether or not an element should be visible when not facing the screen. This property is useful when an element is rotated, and you do not want to see its backside.

The backface-visibility property relates to 3D transforms. With 3D transforms, you can manage to rotate an element so what we think of as the "front" of an element no longer faces the screen. For instance, this would flip an element away from the screen:

Prefixes

Firefox 10+ and IE 10+ support backface-visibility with no prefix. Opera (post Blink, 15+), Chrome, Safari, iOS, and Android all need -webkit-backface-visibility.

Css syntax

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

Values

• visible (default) - the element will always be visible even when not facing the screen.
• hidden - the element is not visible when not facing the screen.
• inherit - the property will gets its value from the its parent element.
• initial - sets the property to its default, which is visible.

jsfiddle