In this section, we will learn what the backface-visibility property is and how to use it in CSS.
Click here to run the example of backface-visibility property.
CSS backface-visibility Property Definition and Usage
By default, when we rotate an element in Y or X axes using `rotateY`/ `rotateX` functions and `transform` property, the back-face of the target element will be visible if the rotation passed 90 degrees.
But CSS provides a property named `backface-visibility` by which we can decide whether to show the back-face of the target element or not!
CSS backface-visibility Property Syntax
backface-visibility: visible|hidden|initial|inherit;
CSS backface-visibility Property Value
There are two values that can be used for this property:
- visible: this is the default value and when used, the back-face of the target element will be shown to users when rotation passed 90 degrees.
- hidden: Using this value, the back-face of the target element becomes hidden from users when the rotation passed 90 degrees.
Note: the two global values “initial” and “inherit” can also be used as the value of `backface-visibility` property.
Example: backface-visibility property in CSS
See the Pen backface-visibility property in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.
How Does CSS backface-visibility Property Work?
In the example above, the first paragraph has the default value of visible, so even though we rotate that element, it is still visible to users. But the second paragraph is not visible because of the value “hidden” set for its `backface-visibility` property.
One possible application of this technique is to place two elements back-to-back, like two sides of a card. The front of the card will be visible, but the back of the card is hidden. Then we can flip both elements around, making the front hidden and the back visible.
Example: CSS backface-visibility property
See the Pen CSS backface-visibility property by Enjoy Tutorials (@enjoytutorials) on CodePen.
