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.
It is documented as part of the CSS Transforms specification.
Syntax
/* Usage Example */
.card-back {
transform: rotateY(180deg);
/* Hide the back face so it doesn't overlap the front */
backface-visibility: hidden;
}
/* Syntax */
backface-visibility: visible;
backface-visibility: hidden;
/* Global values */
backface-visibility: inherit;
backface-visibility: initial;
backface-visibility: revert;
backface-visibility: revert-layer;
backface-visibility: unset;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.
36+
16+
15.4+
12+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more