What on earth is CSS3 perspective property?

Go To StackoverFlow.com


I searched online and found several materials, but none of them illustrated this concept clearly, at least for me. For example, the w3schools says it defines how many pixels a 3D element is placed from the view. It's so abstract to totally understand. Can someone tell me in a more vivid easy-to-understand way? It couldn't be better if there are some images to show this concept.

2012-04-04 20:25
by chaonextdoor


In 3D transformations, perspective gives the object a 3D point of view and attempts to render the perspective of the 3D object from a particular viewer's perspective. It is not easy to understand.

Here's a Safari reference on it.

A beginning tutorial on it.

Some examples of using perspective.

Some more examples.

FYI, in the future I'd suggest disregarding all Google search hits that come from w3schools. They have somehow managed to co-opt a high Google searching ranking with incredibly shallow content.

2012-04-04 20:47
by jfriend00
Thanks. The Safari reference is a good resource - chaonextdoor 2012-04-19 04:47
+1 for the w3schools advise - see also http://w3fools.com - Erwin Wessels 2013-01-31 12:03


When working in a 3D space, we need to set a perspective value, otherwise animated elements will look flat. How? The perspective CSS property gives an element a 3D space by affecting the distance between the Z index and the user.Remember: the Perspective property shouldn’t be applied to the element that will be animated (through a CSS Transition, Transformation or Animation), but to a parent element.

2017-01-20 08:10
by Eldiyar Talantbek