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]()