2D Transformations 145The 2D transformation matrices, and the matrix() function, accept six
values, the combination of which can be used to create the functions intro-
duced already in this chapter. Here’s the syntax:
E { transform: matrix(a,b,c,d,X,Y); }
All of the default values are 0 (zero), and they behave slightly differ-
ently depending on which values are supplied—I’ll explain what this means
as I go along. I said that you can perform all of the functions introduced so
far in this chapter with matrix(), but the process is not quite that simple—
you need to know some trigonometry first.
Before getting to the hard stuff, I’ll start with something simple that
doesn’t require any trig: scaling. If you want to scale an element, you can
use a and d to equate to scaleX() and scaleY() and set values accordingly,
leaving b and c at 0. Therefore, to double an element’s size, you use:
E { transform: matrix(2,0,0,2,0,0); }
You can also translate an element with matrix() by providing horizontal
and vertical offset values to X and Y (respectively). These values are unitless
numbers, which represent pixel values (on HTML elements, anyway; in SVG,
they are vector point values). That being the case, to double an element’s
size and offset it by 15px both vertically and horizontally, you use this code:
E { transform: matrix(2,0,0,2,15,15); }
If you want to skew an element using matrix(), well, this is where it
becomes a lot more complex—here’s where I need to introduce the trigo-
nometric functions. You can read a full explanation of these functions on
Wikipedia (http://en.wikipedia.org/wiki/Trigonometric_functions#Sine.2C_cosine
_and_tangent/), but the following is a quick and dirty summary: The trigo-
nometric functions are ratio values used to calculate angles in a triangle.
The first trigonometric function I’ll use is tan (tangent), which is required
to skew an element along the x- or y-axis. Referring to the original matrix
syntax, the x-axis is supplied as a value to b and the y as a value to c. Here’s
the syntax for each:
E { transform: matrix(1,tan(angle),0,1, X,Y); } / X Axis /
E { transform: matrix(1,0,tan(angle),1, X,Y); } / Y Axis /
The angle refers to the degrees (counterclockwise) of the angle you want
to skew by. If you want to skew an element by 15 degrees, the value you’re
looking for is the tangent of 15. So whip out your scientific calculator—if
you don’t own one, your operating system’s calculator should have a scien-
tific mode—and get the result that tan(15) = 0.27. This result is what you
provide to the matrix function. For example, if you want the skew to be
along the x-axis, you use this syntax:
E { transform: matrix(1,0.27,0,1,0,0); }