perspective-origin property of CSS3

The Perspective Origin property is a property of CSS3. Which is used to define that where a 3D element is based into the axis (x and y axis). This property is only supported by Google Chrome and Safari ( With the help of (webkit-perspective-origin proprty). When we define the property on any elemnt its child elements are effected, the element has not effected by this, in my case, I define this property in div1 but it can effect both div2 and div3. This property is only effect the 3D transformed elements.




<style type="text/css">



position: relative;

height: 150px;

width: 150px;


margin: 45px;

border: 2px solid Red;


perspective-origin: 10% 10%;

-webkit-perspective:150; /* For Google Chrome and Safari   */

-webkit-perspective-origin: 10% 10%; /*  For Google Chrome and Safari  */





position: absolute;

border: 2px solid black;

background-color: Brown;

transform: rotateY(40deg);

-webkit-transform: rotateY(40deg); /*  For Google Chrome and Safari */





position: absolute;

border: 1px solid black;

background-color: Blue;

transform: rotateY(40deg);

-webkit-transform: rotateY(40deg); /*  For Google Chrome and Safari  */





<div id="div1">

  <div id="div2">Mahak</div>

 <div id="div3">Mahak</div>





The output will be: