The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

154 Chapter 13

Perspective

The next function, perspective(), is actually one of the most important as

it creates an artificial viewpoint from where you view the object in three-

dimensional space, providing the illusion of depth. If not specified, the

element will appear “flat” to the viewer, regardless of any other trans-

form functions applied (unless perspective is inherited from the parent;

see “The perspective and perspective-origin Properties” on page 159 for

details). Here’s the syntax:

E { transform: perspective(depth); }

The value depth is either a length unit or the default keyword none. This

length sets a “viewpoint” at that distance along the z-axis away from the ele-

ment’s origin (z = 0). A low depth value—say, 50px—will make the element

appear extremely close to the viewer, with exaggerated dimensions; a value

of around 1000px can be considered “normal.”

The perspective() function is probably easier to show than to describe.

In the next example, I use different values for the function to show you how

various values change the viewers... er, perspective. Here’s the code:

 .trans-1 { transform: perspective(1000px) rotateX(30deg) rotateY(45deg); }

 .trans-2 { transform: perspective(250px) rotateX(30deg) rotateY(45deg); }

 .trans-3 { transform: perspective(150px) rotateX(30deg) rotateY(45deg); }

WArninG The perspective() function must always be listed first when using multiple functions

on the transform property; if listed after other functions, it will be ignored.

You can see the results of the code in Figure 13-4. In the example on

the left (), the element is viewed from a perspective() distance of 1000px.

This is, as I said, the “normal” distance; the element is rotated around two

axes but appears to be correctly proportioned. In the middle example (),

the perspective() value has decreased to 250px, making the element appear

exaggerated in proportion as I placed the viewpoint closer to the element.

The final (right) example () shows the element from a perspective() value

of 150px, which means you are effectively viewing it from 150px along the

z-axis, making the element appear quite exaggerated.

Figure 13-4: The effects of different perspective() function values