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 for backface-visibility property.
Example: backface-visibility property in CSS
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
*{
margin:unset;
box-sizing: border-box;
}
p{
width:10em;
border:thin solid lightgray;
margin-top: 1em;
margin-left:10em;
}
.one{
transform:rotateY(180deg);
backface-visibility: visible;
}
.two{
transform:rotateY(180deg);
backface-visibility: hidden;
}
</style>
</head>
<body>
<p class = "one">First paragraph: A paragraph is a series of related sentences developing a central idea, called the topic.
</p>
<p class = "two">Second paragraph: A paragraph is a series of related sentences developing a central idea, called the topic.
</p>
</body>
</html>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 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
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
*{
margin:unset;
box-sizing: border-box;
}
p{
position:fixed;
width:15em;
height:15em;
background-repeat: no-repeat;
text-align: center;
border:thin solid lightgray;
margin-top: 1em;
margin-left:5em;
backface-visibility: hidden;
transition-property: transform;
transition-duration: 300ms;
}
.two{
transform:rotateY(180deg);
}
button{
padding:1em;
border:thin solid lightgray;
margin: 1em;
background-color: lightskyblue;
}
button:active{
transform:translateY(3px);
}
.one{
background-image: url(photos/sunset-5408739_1280.jpg);
background-size: contain;
}
.two{
background-image:url(photos/forest.jpg);
background-size: contain;
}
</style>
</head>
<body>
<button>Click to Rotate</button>
<div>
<p class = "one">
My First Name is: John
</p>
<p class = "two">
My Last Name is: Doe
</p>
</div>
<script>
(function fun(){
let button = document.getElementsByTagName("button")[0];
let lastName = document.getElementsByClassName("two")[0];
let firstName = document.getElementsByClassName("one")[0];
let firstNameInFront = true;
button.addEventListener("click",(event)=>{
if (firstNameInFront){
lastName.style.transform = `rotateY(0)`;
firstName.style.transform = `rotateY(180deg)`;
firstNameInFront = false;
}else{
firstName.style.transform = `rotateY(0)`;
lastName.style.transform = `rotateY(180deg)`;
firstNameInFront = true;
}
});
})();
</script>
</body>
</html>