CSS Perspective and Perspective-Origin Properties

CSS perspective explained

By using the CSS perspective property, you can specify the distance of a 3D element in pixels:

div {
    -webkit-perspective: 60px; /* Opera, Safari, Chrome */
    perspective: 6000px;
}

Note: CSS perspective does not change the rendering of the element. For that, use transform: perspective().

The syntax for CSS perspective

The only value you need to define is the distance:

perspective: distance;

The default value is none, which means no CSS perspective transformations. You can set a custom value by using length units (e.g., pixels or ems).

Defining the CSS perspective origin

When you're using the perspective CSS property, the center of the element becomes its vanishing point by default. To define a custom point, you can also apply perspective-origin:

div {
    -webkit-perspective: 250px; /* Opera, Chrome, Safari */
    -webkit-perspective-origin: 25% 25%; /* Opera, Chrome, Safari */
    perspective: 250px;
    perspective-origin: 25% 25%;  	
}

The syntax for this property is rather simple – you need to specify the position in relation to both horizontal and vertical axes:

perspective-origin: x-axis y-axis;

You can use use percentages or keywords – left, center, or right for the horizontal and top, center, or bottom for the vertical value.

Note: CSS perspective-origin will not work without perspective.

Browser support

Mobile browser support