Css3 backface-visibility Property
Here is the brief description of how to specify whether the backface of a 3D element is visible or not when not facing the screen, that is specifying the visibility of the backside of a 3D object in CSS3 using the CSS3 backface visibility property.
Explanation
Property :
backface-visibility: visible|hidden|initial|inherit; Where, visible - Default value. The backside is visible. hidden - The backside is not visible. initial - Sets this property to its default value. inherit - Inherits this property from its parent element.Usage:
backface-visibility: hidden;
backface-visibility: visible;
Definition:
The backface-visibility property defines whether or not an element should be visible when not facing the screen.
This property is useful when an element is rotated, and you do not want to see its backside.
It takes the following values.
- visible : Default value.
- hidden : The backside is not visible.
Example :
<style>
.demodiv {
position: relative;
height: 60px;
width: 60px;
background-color: indigo;
color:white;
-webkit-transform: rotateY(180deg); /* Chrome, Safari, Opera */
transform: rotateY(180deg);
}
#div1 {
backface-visibility: hidden;
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
}
#div2 {
backface-visibility: visible;
-webkit-backface-visibility: visible; /* Chrome, Safari, Opera */
}
</style>
<br> <div id="div1" class='demodiv'>Hidden</div>
<div id="div2" class='demodiv'>Visible</div>
.demodiv {
position: relative;
height: 60px;
width: 60px;
background-color: indigo;
color:white;
-webkit-transform: rotateY(180deg); /* Chrome, Safari, Opera */
transform: rotateY(180deg);
}
#div1 {
backface-visibility: hidden;
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
}
#div2 {
backface-visibility: visible;
-webkit-backface-visibility: visible; /* Chrome, Safari, Opera */
}
</style>
<br> <div id="div1" class='demodiv'>Hidden</div>
<div id="div2" class='demodiv'>Visible</div>
Result:
Hidden
Visible
