HTML and CSS Reference
In-Depth Information
With no perspective applied, the Eye of Sauron will be right at the apex of the
cone looking directly toward the element, which will therefore be seen straight
on and totally flat. If you apply perspective values, the Eye of Sauron still looks
directly at the element, but its position is shifted down the side of the cone. The
perspective
value is the distance the Eye of Sauron is from that edge; therefore,
smaller values produce more dramatic distortions in the viewing of the element,
whereas bigger values produce more subtle effects.
Yo u c a n u s e p r e t t y m u c h a n y d i s t a n c e u n i t s t h a t m a k e s e n s e f o r d e fi n i n g t h e
amount of perspective, although pixels provide the most exact control and are
probably the best to use. If you don't include any units, the units default to
pixels.
TIP:
Yo u n e e d t o p u t t h e
perspective
transform
before other transforms you want it applied to. If
you use
rotateX(10deg) perspective(800px)
, for example,
the perspective would have no effect.
Now let's turn to the separate
perspective
property: Look at the perspective-
property.html file. In this example I've added an extra wrapper
<div>
around the
three
<article>
elements identified with an ID of
perspective-wrap
and applied
perspective to the whole lot using the following:
#perspective-wrap {
perspective: 800;
}
#x, #y, #z {
transform: rotateX(30deg);
}
Looking at the example you'll see that the rotation transforms are applied to
the
<article>
elements, but the perspective is applied to all the children of the
<div>
, as if they are all in the same 3D space. Because of the perspective, even
though all the child elements have the same amount of rotation applied, they
appear differently (
Figure 5.12
).
