CSS3 3D perspective Property

Here is the brief description of how to define the perspective of a 3d element in CSS3 using the CSS3 perspective property.

Explanation

Property :

perspective: length|none;


Where,
length - How far the element is placed from the view.
none - Default value. Same as 0. The perspective is not set.
initial - Sets this property to its default value.
inherit - Inherits this property from its parent element.

Usage:


perspective: 500px;

Definition:

The perspective property defines how many pixels a 3D element is placed from the view. This property allows you to change the perspective on how 3D elements are viewed. When defining the perspective property for an element, it is the CHILD elements that get the perspective view, NOT the element itself.

Example :
<style>
#div1 {
position: relative;
height: 120px;
width: 190px;
margin: 5px;
padding: 1px;
border: 3px solid grey;
perspective: 300px;
-webkit-perspective: 300px; /* Chrome, Safari, Opera */
}
#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



Ask Questions

Ask Question