What on earth is CSS3 perspective property?

css perspective css-transforms
chaonextdoor picture chaonextdoor · Apr 4, 2012 · Viewed 7.7k times · Source

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

jfriend00 picture jfriend00 · Apr 4, 2012

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.

Related questions

Perspective transform of SVG paths (four corner distort)

How is it possible to distort paths in SVG in browser so that they are distorted to certain perspective using possibly javascript or css? The perspective distort can be made easily in Photoshop, Illustrator etc, but how about browsers? This …

Read More
Skew one corner of image

I'm trying to skew one single corner of my div background as shown at the green checkmark in the image below: In CSS3 I'm however unable to achieve that, skewing completely skews every corner. I just want to skew the …

Read More
How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More