Post
Ask Question

perspective-origin property of CSS3

Introduction 

 
The Perspective Origin property is a property of CSS3. Which is used to define where a 3D element is based on the axis (x and y-axis). This property is only supported by Google Chrome and Safari ( With the help of (webkit-perspective-origin property). When we define the property on any element its child elements are effected, the element has not affected by this, in my case, I define this property in div1 but it can affect both div2 and div3. This property only affects the 3D transformed elements.
 
Ex:
  1. <html>  
  2.   
  3.      <head>  
  4.           <style type="text/css">  
  5.           #div1   
  6.           {  
  7.                position: relative;  
  8.                height: 150px;  
  9.                width: 150px;  
  10.                padding: 15px;  
  11.                margin: 45px;  
  12.                border: 2px solid Red;  
  13.                perspective: 150;  
  14.                perspective-origin: 10% 10%;  
  15.                -webkit-perspective: 150;  
  16.                /* For Google Chrome and Safari   */  
  17.                -webkit-perspective-origin: 10% 10%;  
  18.                /*  For Google Chrome and Safari  */  
  19.           }  
  20.  
  21.  
  22.           #div2   
  23.           {  
  24.                padding: 50px;  
  25.                position: absolute;  
  26.                border: 2px solid black;  
  27.                background-color: Brown;  
  28.                transform: rotateY(40deg);  
  29.                -webkit-transform: rotateY(40deg);  
  30.                /*  For Google Chrome and Safari */  
  31.           }  
  32.  
  33.           #div3   
  34.           {  
  35.                padding: 150px;  
  36.                position: absolute;  
  37.                border: 1px solid black;  
  38.                background-color: Blue;  
  39.                transform: rotateY(40deg);  
  40.                -webkit-transform: rotateY(40deg);  
  41.                /*  For Google Chrome and Safari  */  
  42.           }  
  43.           </style>  
  44.      </head>  
  45.   
  46.      <body>  
  47.           <div id="div1">  
  48.                <div id="div2">Mahak</div>  
  49.                <div id="div3">Mahak</div>  
  50.           </div>  
  51.      </body>  
  52.   
  53. </html> 
The output will be:
 
1.png