perspective

perspective
CSS perspective Property
The CSS perspective property is used to set the viewing perspective of child elements on the Z axis inside of an element when using 3D tranforms. The parent element itself will not seem to be affected but the viewing perspective of its children in 3D space will. 
Syntax
perspective: 90px;

NOTE: This CSS level 3 property requires browser specific prefixes to work in all browsers just until this property standardizes.
Possible ValuesAbsolute pixel(100px) length or relative(10em) length values.
Usage ExampleIn the following code example we will demonstrate changing the viewer perspective for the child elements in our parent div container. Change the perspective property value in order to see a contrast in perspective of the child elements in 3D space. Lower values result in a close viewing perspective and large values make the perspective seem distant. 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;
    perspective: 80px;
    transform-origin: 0% 50% 100px;
    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>
click here to code.
perspective

Syntax

Possible Values

Usage Example

0 Response to "perspective"

Post a Comment
