It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

CSS Perspective and Perspective-Origin Properties

Reading time 1 min
Published Aug 8, 2017
Updated Oct 15, 2019

CSS perspective explained

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

Example
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:

Example
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 keywordsleft, 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

Browser image
Chrome
36+
Browser image
Edge
12+
Browser image
Firefox
16+
Browser image
IE
10+
Browser image
Opera
15+
Browser image
Safari
9+

Mobile browser support

Browser image
Chrome
36+
Browser image
Firefox
16+
Browser image
Opera
All
Browser image
Safari
9+