The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

146 Chapter 12

noTe As I’m using degrees in my examples, make sure your calculator’s trigonometric type

is set to degrees if you want to follow along. If you prefer working in gradians or

radians, you can update all of these examples accordingly.

As mentioned, skew functions can also be used to rotate an element—

and you can do the same with matrix(). This time you have to make use

of the sin (sine) and cos (cosine) trigonometric functions. To rotate an ele-

ment, the matrix() syntax is:

E { transform: matrix(cos(angle),sin(angle),-sin(angle),cos(angle),X,Y); }

Note that a and d take the same value, and b and c take inverse values (if

b is a positive value, c is the negative of the same value, and vice versa). Once

again, angle refers to the degrees of the angle you want to rotate the element

by. To rotate by 60 degrees, you go back to your scientific calculator and cal-

culate the cos and sin of 60. My calculator tells me that cos(60) = 0.5 and

sin(60) = 0.87, so the required code is

E { transform: matrix(0.5,0.87,-0.87,0.5,0,0); }

Now let’s look at a few examples. Here’s the code I’ll use:

h2.transform-1 { transform: matrix(1,0,0,-1,0,0); }

h2.transform-2 { transform: matrix(1,0,0.268,1,-10,-20); }

h2.transform-3 { transform: matrix(0.98,-0.17,0.17,0.98,0,0); }

The output is shown in Figure 12-9.

Figure 12-9: Examples of transformations made with the matrix function

In the first example, I’ve flipped the element vertically, as I did earlier

using scale() in Figure 12-7. In the next example, I’ve skewed the element

by 15 degrees along the y-axis (after calculating that tan(15) = 0.268) and

translated it along both axes. The final example shows the element rotated

by 10 degrees; the values are the results of the calculations I showed you

previously: cos(10) = 0.98 and sin(10) = 0.17. As mentioned, the sin value is

negative in position b and positive in position c, which makes the rotation

uniform.