Blog

perspective-origin property of CSS3

By Mahak Gupta Blogs | JavaScript Aug 24, 2012
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).

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.

Ex:


<html>

<head>

<style type="text/css">

#div1

{

position: relative;

height: 150px;

width: 150px;

padding:15px;

margin: 45px;

border: 2px solid Red;

perspective:150;

perspective-origin: 10% 10%;

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

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

}



#div2

{

padding:50px;

position: absolute;

border: 2px solid black;

background-color: Brown;

transform: rotateY(40deg);

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

}

#div3

{

padding:150px;

position: absolute;

border: 1px solid black;

background-color: Blue;

transform: rotateY(40deg);

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

}

</style>

</head>


<body>


<div id="div1">

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

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

</div>

 

</body>

</html>


The output will be:

1.png

COMMENT USING