Backface Visibility Property
Last updated: 2026-09-13
backface-visibility Backface Visibility Property
The backface-visibility property controls whether an element is visible when, after a 3D rotation, its back faces the viewer. The default value visible shows the front content mirrored on the back; with hidden, the element is invisible when its back faces the viewer. This is commonly used for card flips, cubes, and other 3D effects that distinguish the front from the back.
| Category | |
|---|---|
| Initial Value | visible |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
backface-visibility: visible | hidden;⚙️ Values
| Value | Type | Description |
|---|---|---|
visible | hidden | Keyword | Whether the back face is visible |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| backface-visibility | ✓ v36 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v23 |
| Supported in all major browsers | |||||
Important： backface-visibility only takes effect under 3D transforms (transform-style: preserve-3d); a 2D rotation never shows a back face.
Tip： In a card flip, both faces need backface-visibility: hidden, and the back face is pre-rotated with rotateY(180deg) so it sits behind.
❓ FAQ
QWhy do I see mirrored text after flipping an element with CSS?
AThe default is backface-visibility: visible, so when the back of an element faces the viewer, the front content is shown mirrored — like a transparent reflection. For a proper card flip, set backface-visibility: hidden on both faces and pre-rotate the back face with rotateY(180deg); during the flip the two faces become visible alternately.
QDoes the backface-visibility property affect rendering performance?
AWith hidden, the browser can skip the work of painting the invisible back face, which can actually improve rendering performance in 3D scenes — a recommended practice. By contrast, visible keeps both faces painted at all times. For performance-sensitive cases with many 3D cards, set hidden uniformly and control visibility as needed.
QDoes backface-visibility work with 2D rotations in CSS transforms?
ANo, it is meaningless there. A 2D rotation such as rotate 45deg never turns the element around, so the back never faces the viewer and backface-visibility does not kick in. It only matters under 3D transforms: when rotateY(180deg) or rotateX(180deg) turns the element away from the viewer, hidden hides the back face.
QHow do I build a 3D card flip effect with backface-visibility?
AFour steps: set transform-style: preserve-3d on the parent container; absolutely position the front and back children on top of each other and give both backface-visibility: hidden; pre-rotate the back face with rotateY(180deg); then rotate the parent to rotateY(180deg) on interaction. Combined with a transition, you get a smooth flip.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
