How to set the perspective from where an element is viewed in CSS ?
In this article we will see, how the CSS perspective works. The CSS perspective is a new CSS property that has to provide to manage the distance between the z-axis. We all know that we work with a 2D surface. So if we rotate our objects, then this completeness is not displayed. The solution to this problem is the CSS perspective which we see even with the z-axis.
They work like a projector if the source is far from the object so making a big image on the wall. They are used very simply by applying the perspective property to the parent element and make any transformation in the child element that looks like a 3D element.
/* parent div */ perspective: perspective_distance; /* child div */ transform: value;
If the parent div applied perspective so any property of transform in the child apply so they behave as a 3D object
Example 1: Below example is illustrated without using Perspective.
Example 2: Below is the example that illustrates the use of Perspective.
- Google Chrome 36.0
- Internet Explorer 10.0
- Firefox 16.0
- Opera 23.0
- Safari 9.0