backface-visibility
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.
The backface-visibility
CSS property sets whether the back face of an element is visible when turned towards the user.
Try it
backface-visibility: visible;
backface-visibility: hidden;
1
2
3
6
#default-example {
background: linear-gradient(skyblue, khaki);
}
#example-element {
width: 100px;
height: 100px;
perspective: 550px;
perspective-origin: 220% 220%;
transform-style: preserve-3d;
}
.face {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: absolute;
backface-visibility: inherit;
background: rgba(0, 0, 0, 0.4);
font-size: 60px;
color: white;
}
.front {
transform: translateZ(50px);
}
.back {
background: rgb(230, 0, 0);
color: white;
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgba(0, 0, 0, 0.6);
transform: rotateY(90deg) translateZ(50px);
}
.bottom {
background: rgba(0, 0, 0, 0.6);
transform: rotateX(-90deg) translateZ(50px);
}
An element's back face is a mirror image of its front face. Though invisible in 2D, the back face can become visible when a transformation causes the element to be rotated in 3D space. (This property has no effect on 2D transforms, which have no perspective.)
Syntax
/* Keyword values */
backface-visibility: visible;
backface-visibility: hidden;
/* Global values */
backface-visibility: inherit;
backface-visibility: initial;
backface-visibility: revert;
backface-visibility: revert-layer;
backface-visibility: unset;
The backface-visibility
property is specified as one of the keywords listed below.
Values
visible
-
The back face is visible when turned towards the user.
-
The back face is hidden, effectively making the element invisible when turned away from the user.
Formal definition
Initial value | visible |
---|---|
Applies to | transformable elements |
Inherited | no |
Computed value | as specified |
Animation type | discrete |
Formal syntax
backface-visibility =
visible |
hidden
Examples
Cube with transparent and opaque faces
This example shows a cube with transparent faces, and one with opaque faces.
HTML
backface-visibility: visible;
backface-visibility: hidden;
1
2
3
4
5
6
Since all faces are partially transparent, the back faces (2, 4, 5) are
visible through the front faces (1, 3, 6).
The three back faces (2, 4, 5) are hidden.
CSS
/* Classes that will show or hide the
three back faces of the "cube" */
.show-bf div {
backface-visibility: visible;
}
.hide-bf div {
backface-visibility: hidden;
}
/* Define the container div, the cube div, and a generic face */
.container {
width: 150px;
height: 150px;
margin: 75px 0 0 75px;
border: none;
}
.cube {
width: 100%;
height: 100%;
perspective: 550px;
perspective-origin: 150% 150%;
transform-style: preserve-3d;
}
.face {
display: block;
position: absolute;
width: 100px;
height: 100px;
border: none;
line-height: 100px;
font-family: sans-serif;
font-size: 60px;
color: white;
text-align: center;
}
/* Define each face based on direction */
.front {
background: rgb(0 0 0 / 30%);
transform: translateZ(50px);
}
.back {
background: rgb(0 255 0 / 100%);
color: black;
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgb(196 0 0 / 70%);
transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgb(0 0 196 / 70%);
transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgb(196 196 0 / 70%);
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: rgb(196 0 196 / 70%);
transform: rotateX(-90deg) translateZ(50px);
}
/* Make the table a little nicer */
th,
p,
td {
background-color: #eeeeee;
margin: 0px;
padding: 6px;
font-family: sans-serif;
text-align: left;
}
Result
Specifications
Specification |
---|
CSS Transforms Module Level 2 # backface-visibility-property |