CSS backface-visibility Property
The backface-visibility property relates to 3D transforms.
With 3D transforms and the backface-visibility property, you're able to rotate an element such that the original front of an element no longer faces the screen.
In other words -
This property is used to indicate whether the backside of an element is visible if the element is rotated to display the back.
Syntax -
|
backface-visibility: hidden | visible | inherit | initial;
|
Now we will see the values –
1. visible
The element will always be visible even when not facing the screen and this is the default value.
2. hidden
The element is not visible when not facing the screen.
3. inherit
The property will gets its value from the its parent element
4. initial
Sets the property to its default, which is visible
Now we will see an Example -
Example - Using visible and hidden -
|
<!DOCTYPE html>
<html>
<style>
.flip {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-webkit-backface-visibility: visible;
-moz-backface-visibility: visible;
-ms-backface-visibility: visible;
}
.flip.back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
</style>
<body>
<div class="flip">A sample text!</div>
<div class="flip back">A sample text!</div>
</body>
</html>
|
Output -
|
Note -
WebKit supports this property as -webkit-backface-visibility, though at the time of this edition's writing it is only available in the iPhone and the development builds of Safari 4+.
|
