HTML & CSS Wiki
Advertisement

The CSS -webkit-backface-visibility Apple extension property 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 transformations 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.

Values[]

Value Description
<visibility> Determines whether or not the back face of a transformed element is visible. Refer to the visibility property for values. The default value is visible.
visible The element is always visible even when it is not facing the screen.
hidden The element is invisible if it is not facing the screen.
Advertisement