transform-style
CSS transform-style Property
The CSS transform-style property specifies whether the children of an element should be positioned in 3D space or flattened in its plane.
Syntax
transform-style: preserve-3d;
NOTE: This CSS level 3 property requires browser specific prefixes to work in all browsers just until this property standardizes.Possible Values
flat | preserve-3d flat - Child elements will be flattened in the plane of the parent. This is default behavior. preserve-3d - Preserve 3D positioning of children.Usage Example
In the following code example we will preserve-3d for the child elements in our parent div container. Change it to 'flat' in order to see a contrast in behavior of the child elements. Add -webkit- to all 'transform' property instances to see it working in Chrome and Safari.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#mydiv{
transform: perspective( 1000px ) rotateY( 0deg );
transform-style: preserve-3d;
transform-origin: 0% 50% 100px;
transition: transform .5s linear 0s;
background: #090; width:300px; height:300px;
}
#mydiv > div{
transition: transform .5s linear 0s;
background:#CCC; width:100px; height:100px;
}
#mydiv:hover{
transform: perspective( 1000px ) rotateY( -45deg );
}
#mydiv:hover > div{
transform: perspective( 1000px ) rotateY( -75deg );
}
</style>
</head>
<body>
<div id="mydiv">
<div>Child 1</div>
<div>Child 2</div>
</div>
</body>
</html>
0 Response to "transform-style"
Post a Comment