CSS3 Pushing the Limits

Chapter 5

Introducing CSS3 2D Transforms

Transforms are an extremely powerful addition to CSS3, forming the basis of many of the jaw-dropping CSS experiments you've probably come across around the web in the past couple of years. The true potential of transforms is only fully realized when used in combination with CSS transitions (discussed in Chapter 6) or when their 3D capabilities are tapped into (Chapter 7). First, though, you need to understand how they work, starting with their most basic form—2D transforms. This chapter gives you an in-depth look at 2D transforms that will stand you in good stead when it comes to utilizing their 3D capabilities and combining them with transitions.

On their own, 2D transforms allow you to manipulate an element from its originally intended state in terms of position, size, orientation, and perspective. And they can do all that with just one line of CSS, whereas you may have previously had to rely on image replacement techniques or JavaScript to make such adjustments.

This particular area of CSS3 has received a lot of attention since its emergence and certainly appears to be one of the more fashionable features from the CSS3 specifications. The power and capabilities of transforms as well as their ease of use have pushed the imaginations of front-end developers into overdrive and have justified the excitement and attention surrounding them. It's for this reason that the Transforms module has been picked up fairly quickly by the browser vendors ...