The backface-visibility
property determines whether or not the “back” side of a transformed element is visible when facing the viewer.
The back face of an element usually has a transparent background, letting, when visible, a mirror image of the front face be displayed.
It is used in conjunction with CSS transforms when an element is rotated in three-dimensional space so that its front face no longer faces towards the screen, and its back face is facing it instead. For example, applying a rotation about the y-axis of 180° (for instance) would cause the back side of the element to face the viewer. It has no effect on two-dimensional transforms.
This property is useful when you place two elements back-to-back, as you would to create a playing card. When the card is flipped, you wouldn’t want the content of the front face to be visible through the back face. Without this property, the front and back elements could switch places at times during an animation to flip the card. It is also useful when creating cubes in the three-dimensional space. See the Live Demo section below for a live example.
Official Syntax
-
Syntax:
backface-visibility: visible | hidden
- Initial: visible
- Applies To: transformable elements
- Animatable: no
Values
- visible
- Indicates that the back face of the element is visible, and thus the front face shows through it.
- hidden
- Indicates that the back face is hidden and therefore the front face does not show through.
Examples
In this example, we’re going to create a card flip example using the backface-visibility
property. The markup consists of a container that contains two elements that we’re going to stack on top of each other, back-to-back. We’re going to apply the backface-visibility
property to these two elements, and then when the container is hovered, the two elements are going to be rotated in three-dimensional space, thus showing the “other side of the card”. In the live demo below, you can see this example live.
<div class="container"> <div class="card"> <div class="face front">Front</div> <div class="face back">Back</div> </div> </div>
The CSS with comments explaining each step is the following:
.container { /* general styles here... */ /* activate 3D space */ perspective: 800px; } .card { /* general styles here... */ position: relative; transition: all .4s linear; /* allow child elements to be positioned in 3D space of their own */ transform-style: preserve-3d; } .face { /* general styles go here... */ /* position faces absolutely so that they stack on top of each other */ position: absolute; width: 100%; height: 100%; /* prevent the front face from showing through the back */ backface-visibility: hidden; } .back { /* ... */ /* initially rotate the element in the back so that when the card is flipped, it faces the viewer */ transform: rotateY(180deg); } /* when the card is hovered, rotate it. This will allow the back face to face the viewer. */ .card:hover { transform: rotateY(180deg); }
Check out the live demo in the next section.
Live Demo
Hover over the following box in the following example to see it flip in a card-like effect. Try changing the backface-visibility
value to visible
to see how it affects the transformation.
The following example shows two cubes in three-dimensional space. The first one on the left shows the cube with backface-visibility: visible
, and the second one on the right shows the cube with backface-visibility: hidden
.
View this demo on the Codrops Playground
The cubes are from David DeSandro’s Intro to CSS 3D transforms.
Browser Support
CSS3 3D Transforms
Method of transforming an element in the third dimension using the `transform` property. 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.
W3C Working Draft
Supported from the following versions:
Desktop
- 36
- 16
- 10
- 23
- 15
Mobile / Tablet
- 15
- 129
- No
- 129
- 130
Further Reading
- CSS Transforms Module Level 1
- Intro to CSS 3D transforms by David DeSandro