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.
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;
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.
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.
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.
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
Firefox on Windows incorrectly renders plugin content within no-op 3D transforms.
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
backface-visibility produces visible noise.
Transforms may break
position:fixed styles of contained elements.
The browser stats and issues were taken from caniuse.com
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.