HTML and CSS Reference
In-Depth Information
FIGURE 5.11
A visualization of
how perspective works in CSS
Tra n s fo r m s .
No perspective
Perspective: 800px
Perspective
cone
Perspective: 250px
Element transform is applied to
As you can see, a small pixel value produces a very large perspective—this
equates to your point of view being closer to the element—which possibly looks a
bit over the top and unrealistic. A value of 800 pixels is very visible but a bit more
realistic, and a value of 2000 pixels is much more subtle.
So how does perspective work?
The
perspective
value defines how far away the viewpoint of the element is
from the closest side of the element. OK, that might not make much sense, so I'll
use a diagram and provide some more explanation. Imagine that the element you
are applying the transform to is being viewed by a big eyeball, like your own Eye of
Sauron but without the bad-ass attitude. And imagine that a giant invisible cone
sits on top of the element. The apex of the cone is right above the middle of the
element, and the base of the cone sits on the flat plane of the element (
Figure 5.11
).
