CSS3 Pushing the Limits

Chapter 7

A New Dimension with 3D Transforms

In the last couple of chapters, you read about the capabilities of CSS transforms in a 2D environment, and you were, in all likelihood, suitably impressed. However, the CSS3 Transforms specification has quite literally another dimension—3D transforms. And if you were impressed by 2D transforms, you'll be blown away by the power and capability of their 3D counterpart.

By the end of this chapter, you will see the web differently. No longer will you see it as a flat canvas on which to paint your picture and move things up and down or left to right. Suddenly, the browser becomes a legitimate platform in which to challenge the limitations of your flat screen and its 2D nature by creating genuine, web-based 3D environments using nothing but HTML and CSS.

In this chapter I walk you through the basics of the 3D transform properties, which can be difficult to understand without concise explanation. You also learn how three of the four transform types you've become so familiar with operate in a 3D environment. You finish by creating an actual 3D cube and moving it around in a 3D space!

Only three of the four transform types can operate in a 3D environment: rotate, translate, and scale. This, of course, means that the skew() function is limited to 2D transformations.

Like many of the CSS3 modules, the 3D aspect of the transforms module can appear rather intimidating at first glance, but as always, after you have some detailed explanation and ...