Home »
CSS
The backface-visibility Property in CSS
CSS | backface-visibility Property: Here, we are going to learn about the backface-visibility property with syntax, examples in CSS (Cascading Style Sheet).
Submitted by Anjali Singh, on January 07, 2020
CSS | backface-visibility Property
Kickstart:
Developing a web page can sometimes prove to be challenging as we deal with many elements and sometimes we are unaware of the properties to be implied for better functioning or editing. This kind of problem is faced by many professional web developers and much more by beginners. But as they say, if you have not learned anything different then have you learned at all?
This section is about one such property with which you might not be aware and thus this article is to help you understand everything you need to know about that property. The name of the property is the backface-visibility property in CSS. Now the name might sound perplexing but do not be worried the section below is all about definition!
Definition:
Let us have a get-to-know of the property before we proceed further on to more details.
The backface of any element is a mirror image of the front face. The backface-visibility property in CSS is used to define if the backface of an element is visible to the user or not.
This property is useful when an element is rotated and decides if the user should see the back face of the element or not.
There are two values to this property,
Syntax:
Element{
Backface-visibility : visible|hidden|initial|inherit;
}
Let's discuss each property one by one,
backface-visibility : visible
Very simple to use and understand property, the name itself bears the definition. This value of the backface-visibility property is used to display the backface of an element to the user. It is also the default value for this property.
Syntax:
Element{
backface-visibility : visible;
}
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
position: relative;
height: 100px;
width: 100px;
background-color: yellow;
transform: rotateY(180deg);
}
div {
backface-visibility: visible;
}
</style>
</head>
<body>
<h1>The backface-visibility Property</h1>
<div>VISIBLE</div>
</body>
</html>
Output
In the above example, if you notice then you may see the order of the word visible is reversed, similar to what happens when we see a reflection of something in the mirror, therefore the mirror image that is the back face of the element div is visible to the user.
backface-visibility : hidden
You can remember this value as the vice versa of the Visible value as this value of the backface-visibility property is used to hide the backface of an element to the user.
Syntax:
Element{
backface-visibility : hidden;
}
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
position: relative;
height: 100px;
width: 100px;
background-color: yellow;
transform: rotateY(180deg);
}
div {
backface-visibility: hidden;
}
</style>
</head>
<body>
<h1>The backface-visibility Property</h1>
<div>HIDDEN</div>
</body>
</html>
Output
In the above example, it is clearly understood that while the hidden value is enabled of the backface property then the mirror image will not be displayed to the user just the vice versa of the visible value as mentioned in the definition, thus the back face of the div element is hidden from the user and the element is not displayed.
CSS Tutorial & Examples »