CSS backface-visibility Property

The backface-visibility property determines whether or not the back side of an element is visible when facing the viewer. The back face of an element is always 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 is meant to be used with CSS transforms when an element is rotated in three-dimensional space. In such cases, the front face of the element may no longer be towards the screen, and its back face might be facing the screen instead. This property has no effect on 2D transforms as there is no perspective.

The initial value of backface-visibility property is visible. You can only apply it to transformable elements. This property is not inheritable. This property is also not animatable. The transition between different values will be sudden.

Syntax

This is the formal syntax for using backface-visibility property —

backface-visibility: visible | hidden

Here are some examples of using this property —

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

Acceptable Values

visible

Indicates that the back face of the element is visible. A mirrored version of the content of the front face is shown to users in this case. As an example, consider a transparent piece of glass surface with something written on it. When you rotate the glass by 180°, what's written on the other face is stilll visible from the back.

hidden

Indicates that the back face is hidden and therefore the front face won’t be visible. In this case, you are not allowed to see the back side of the glass. This means that anything mirrored on it won't be visible either.

Examples

In the following example, the back face of the second card has been `hidden`. You can see that the card hide as soon as it has turned the other way. You can use this property while creating card flipping effects or games.

See the Pen CSS backface-visibility Property by Tutorialio (@tutorialio) on CodePen.

Browser Support

The CSS3 3D Transforms property which Includes support for the perspective property to set the perspective in z-space and the backface-visibility property to toggle display of the reverse side of a 3D-transformed element is fully supported in 89.19% browsers and partially supported in 4.61% browsers. Therefore, its overall browser support is 93.80%.

This property is partially supported in IE 10+ and fully supported in Edge 12+, Firefox 16+, Chrome 36+, Opera 23+, iOS Safari 9.0-9.2+, Android 53+ and Chrome for Android 55+.

Notes and Issues

Some configurations of Linux and older Windows machines (those without WebGL support) have trouble with 3D transforms and will treat them as if perspective was set as none.

Firefox on Windows incorrectly renders plugin content within no-op 3D transforms.

The perspective property doesn’t work on the body element in Firefox, it must be used on an inner element.

Chrome has a (recently fixed) bug where combining clip-path and backface-visibility produces visible noise.

Transforms may break position:fixed styles of contained elements.

The browser stats and issues were taken from caniuse.com

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top