Chapter 9 ■ CSS3 3D tranSformS, tranSitionS, anD animationS
(The image shown here is from Per Ola Wiberg, at http://www.flickr.com/photos/powi, used by permission, as are all
the photographs used in this chapter).
Figure 9-1. Cbanges to perspective in 3D transforms creates different visual results
Figure 9-2. Cbanges to perspective in 3D transforms creates different visual results
In the image on the left, the viewpoint is relatively close to the affected elements; the perspective gained by
setting to 200px is similar to viewing the scene through a camera’s macro lens. 3D changes are likely to appear
dramatic and distorted. In the image on the right, the viewpoint (set to 2000px) is distant from the affected
elements, rendering the content relatively “flat”, as if viewed through a telephoto lens. Visual transforms in 3D
space are more likely to be subtle and understated.
While individual elements may have separate perspective properties applied to them, doing so implies
that each element has its own visual origin, and will be displayed unrelated to other elements in 3D space.
Transformation of the elements means that each will show a different vanishing point while potentially taxing the
browser more as it calculates the independent orientations of each element. Unless you are deliberately aiming
for an Inception-like effect, it is recommended that you apply perspective just once to a parent element that
contains the content you wish to manipulate in 3D space. A containing div or possibly the body element itself
can both work well. With the perspective declaration in place on the right element, 3D transforms of its child
elements will create a consistent visual appearance, as shown in the right-side image of Figure 9-2.
Just as 2D transforms have a transform-origin, 3D transforms have a perspective-origin that defaults
to the center of the element. While it is not wrong to place the perspective-origin elsewhere (using any CSS
length or appropriate keyword, horizontal followed by vertical location relative to the element), you should be