HTML5 & CSS3 For The Real World

Chapter 8CSS3 Transforms and Transitions

Our page is fairly static. Actually, it’s completely static. In Chapter 4 we learned a little about how to alter a form’s appearance based on its state with the :invalid and :valid pseudo-classes. But what about really moving things around? What about changing the appearance of elements—rotating or skewing them?

For years, web designers have relied on JavaScript for in-page animations, and the only way to display text on an angle was to use an image. This is far from ideal. Enter CSS3: without a line of JavaScript or a single JPEG, you can tilt, scale, move, and even flip your elements with ease.

Let’s see how it’s done.

Transforms

Supported in Firefox 3.5+, Opera 10.5, WebKit since 3.2 (Chrome 1), ...