backface-visibility
Determines if you can see the 'back' of an element when it's flipped in 3D space. Setting it to 'hidden' is essential for creating smooth card-flip animations where the back face shouldn't show through the front.
Quick example
.card-back {
transform: rotateY(180deg);
/* Hide the back face so it doesn't overlap the front */
backface-visibility: hidden;
}Quick facts
Initial value
visibleInherited
No
Applies to
transformable elements
Animation type
discrete
Values
visiblehidden backface-visibility Browser Support
Widely available Since 2022 95% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2022.
Safe to use without fallbacks.
36+
16+
15.4+
12+