136 Chapter 12
work on the module continues today. The long and the short of this story
is that, although the CSS Transforms module is still only a Working Draft,
the properties within it are well implemented, and you can start using these
new features right away.
One thing to note before I introduce the syntax: By the end of this
chapter, I’ll have introduced some fairly complex functions, so you might
want to brush up on your trigonometry. Are you nervous? Don’t worry; I’ll
make it as painless as possible.The transform Property
A range of different transformations can be applied, but all are declared as
functions in the transform property. Here’s the basic syntax:E { transform: function(value); }A number of possible functions are available; I’ll explore each in turn
throughout the rest of this chapter. Each function takes either a single value
or a comma-separated list of values. I’ll also explain what this means when I
discuss each function individually.
You can apply multiple transformations to a single element by simply
listing functions, space-separated, in the transform property:E { transform: function(value) function(value); }You need to be aware of one very important caveat when using the
transform property, but before I talk about that, I need to introduce the vari-
ous functions. I urge you, however, to not skip “An Important Note About
Transformation Functions” on page 144.rotate
Probably the simplest of all the functions is rotate(), which does what it
sounds like it should do: It rotates the element around a set point. Here’s
the syntax:E { transform: rotate(value); }The value here is a single angle value, just like you used with the CSS
gradients introduced in Chapter 11. And, as in that chapter, I’m sticking
with the commonly understood degrees (deg) unit for my examples.
To show you rotate() in action, I’ll rotate an h2 element by −15 degrees
(or 345 degrees) using this rule:h2 { transform: rotate(-15deg); }