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).

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

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

Chrome

36+

Edge

12+

Firefox

16+

IE

10+

Opera

15+

Safari

9+

Mobile browser support

Chrome

36+

Firefox

16+

Opera

All

Safari

9+