What on earth is CSS3 perspective property?

Question

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.

Answer 1

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.

Answer 2

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.