backface-visibility
CSS backface-visibility Property
The CSS backface-visibility property specifies whether or not the back side of a transformed element should be displayed when it faces the viewer.
backface-visibility: hidden;
NOTE: This CSS level 3 property requires browser specific prefixes to work in all browsers just until this property standardizes.
Values
visible | hidden visible - Makes the back face visible(this is default behavior). hidden - Hides the back face of a transformed element.Example
In the code example below we have the element backface hidden as it rotates. Change or remove the 'backface-visibility' property to show the backface of the transformed element to see the contrast. Add -webkit- to all 'transform' and 'backface-visibility' property instances to see it working in Chrome and other webkit browsers.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#mydiv {
background: #84C1FF; width:300px; height:300px;
}
#mydiv > #child1 {
transform: perspective( 1000px ) rotateX( 0deg );
transition: transform 3s linear 0s;
backface-visibility: hidden;
background:#093; width:200px; height:200px;
}
#mydiv:hover > #child1 {
transform: perspective( 1000px ) rotateX( 360deg );
}
</style>
</head>
<body>
<div id="mydiv">
<div id="child1">Child 1</div>
</div>
</body>
</html>
0 Response to "backface-visibility"
Post a Comment