perspective-origin
CSS perspective-origin Property
The CSS perspective-origin property sets the origin for the CSS 'perspective' property. It sets a vanishing point for the perspective by adjusting the X and Y position that the viewer appears to be looking at the children of the element.
Syntax
perspective-origin: 0% 50%;
NOTE: This CSS level 3 property requires browser specific prefixes to work in all browsers just until this property standardizes.Possible Values
You can supply pixel lengths or percentages for the values. The keywords left, center, right, top and bottom may also be used instead for the values. Default setting for elements before adjusting is 50% 50%.Usage Example
In the following code example we will demonstrate how the perspective origin changes in the element. Change the perspective-origin property values in order to see a contrast in origin of perspective for the child elements in 3D space. Add -webkit- to all 'transform' property instances to see it working in Chrome and other webkit browsers.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#mydiv{
transform: perspective( 1000px ) rotateY( 0deg );
transform-style: preserve-3d;
perspective: 80px;
perspective-origin: 10% 50%;
transition: transform .5s linear 0s;
background: #84C1FF; width:300px; height:300px; margin:100px;
}
#mydiv:hover{
transform: perspective( 1000px ) rotateY( -45deg );
}
#mydiv > div{
background:#CCC; border:#000 1px dashed; width:100px; height:100px;
}
#ch1{
transform: perspective( 1000px ) translateZ(30px);
}
#ch2{
transform: perspective( 1000px ) translateZ(20px);
}
</style>
</head>
<body>
<div id="mydiv">
<div id="ch1">Child 1</div>
<div id="ch2">Child 2</div>
</div>
</body>
</html>
0 Response to "perspective-origin"
Post a Comment