CSS3 perspective-origin Property
Here is the brief description of how to define where a 3D element is based in the x- and the y-axis in CSS3 using the CSS3 perspective-origin property.
Explanation
Property :
perspective-origin: x-axis y-axis|initial|inherit; Where, x-axis - Defining where the view is placed at the x-axis (Possible Values: left, center, right, length, %. Default value: 50%) y-axis - Defining where the view is placed at the y-axis (Possible values: top, center, bottom, length, %. Default value: 50%) initial - Sets this property to its default value. inherit - Inherits this property from its parent element.Usage:
perspective-origin: 10% 10%;
Definition:
The perspective-origin property defines where a 3D element is based in the x- and the y-axis.
This property allows you to change the bottom position of 3D elements.
When defining the perspective-origin property for an element, it is the CHILD elements that are positioned,
NOT the element itself.
It takes the following values.
- x-axis : Defining where the view is placed at the x-axis(left,center,right,length,%).
- y-axis : Defining where the view is placed at the y-axis(top,center,bottom,length,%).
Example :
<style>
#div1 {
position: relative;
height: 120px;
width: 190px;
margin: 5px;
padding: 1px;
border: 3px solid grey;
perspective: 200px;
-webkit-perspective: 200px; /* Chrome, Safari, Opera */
perspective-origin: 50% 80%;
}
#div2 {
padding: 50px;
position: absolute;
background-color: violet;
-webkit-transform: rotateX(45deg); /* Chrome, Safari, Opera */
transform: rotateX(45deg);
}
</style>
<br> <div id="div1">
<div id="div2">Perspective</div>
</div>
#div1 {
position: relative;
height: 120px;
width: 190px;
margin: 5px;
padding: 1px;
border: 3px solid grey;
perspective: 200px;
-webkit-perspective: 200px; /* Chrome, Safari, Opera */
perspective-origin: 50% 80%;
}
#div2 {
padding: 50px;
position: absolute;
background-color: violet;
-webkit-transform: rotateX(45deg); /* Chrome, Safari, Opera */
transform: rotateX(45deg);
}
</style>
<br> <div id="div1">
<div id="div2">Perspective</div>
</div>
Result:
Perspective
