Chapter 9
CSS3 3D Transforms, Transitions,
and Animations
So far you’ve manipulated images, UI elements, and other web content in the flat planar space of the viewport.
But using the scale transform doesn’t necessarily imply that an element is further away from the viewer, only
that it is larger or smaller; using standard CSS fails to impart a true sense of perspective or depth.
The 3D properties of the CSS Transforms module change all that. 3D Transforms allow you to manipulate
content in a projected 3D space. Those 3D-projected elements can then be animated using the transition or
keyframe syntax you’ve explored in previous chapters.
3D Transforms are one aspect of CSS3 that tend not to degrade well in the browser: if the 3D transform
declarations are not understood by the client, elements will usually appear stacked on top of each other. You
should carefully consider this before rendering elements in older browsers
Although they can be used as such, CSS 3D Tranforms are not intended to make entire web sites a “3D
environment” in which the browser window spins between one page and another. Rather, the new properties
are typically used much as the rest of CSS is used: to make presentational choices for some elements on a web
page. Creating and interacting with entire “worlds” of 3D content is best left to the context of the canvas element,
through technologies such as WebGL.
Due to their heavier computational demands, 3D transforms are pipelined directly to the client’s GPU,
providing a high frame rate during animation.
Perspective
The key to transforming HTML elements in 3D space is perspective, which can be specified as a CSS property:
#ngc-1763 { perspective: 600px; }
It can also be specified as a value in transform:#ngc-1763 { transform: perspective(600px); }
Both methods are exactly equivalent and produce the same result. Naturally, both methods will require
vendor prefixes to gain support in older browsers.
Note that you will not see any difference after applying perspective alone. Setting perspective is a
necessary precursor to 3D manipulation, but does not change an element’s appearance in and of itself.
perspective can take any positive CSS length value and defines the distance from the viewpoint to the
3D element. This may be the most difficult aspect of 3D transforms to understand, which is why this property
deserves greater consideration than some others. The perspective property is illustrated in Figure 9-1.