2D Transforms and Transitions - Beginning CSS3 - page 446

Skewing Elements
So far, all the numbers passed as arguments are straightforward. They're simply the scaling factor and the
number of pixels you want to move the element. However, to skew an element, you need to calculate the tangent
of the angle using the trigonometric tan() function. Unfortunately, CSS doesn't support tan() ,
so you need to work it out yourself either using a scientific calculator or an online resource, such as
www.rapidtables.com/calc/math/Tan Calculator.htm .
The horizontal example in skew.html uses skewX() like this:

#horizontal {
transform: skewX(-30deg);
}

The tangent of -30° is -.58 , so the equivalent in matrix_3.html is this:

#horizontal {
transform: matrix(1, 0, -.58, 1, 0, 0);
}

The vertical example uses an angle of 15°, the tangent of which is .27 . So, the equivalent in matrix_4.html is:

#vertical {
transform: matrix(1, .27, 0, 1, 0, 0);
}

These settings produce the same results as Figure 20-14 .

■ Although the scaling factors and translate coordinates are in the order horizontal/vertical, the order of
the skew tangents is reversed. The second argument is for the vertical skew, and the third for the horizontal skew.

Caution

Rotating Elements
To rotate an element, the first four arguments to the matrix() function are as follows:
1.

The cosine of the angle of rotation

2.

The sine of the angle of rotation

3.

The inverse value of argument 2 (negative if 2 is positive, and vice versa)

4.

The same as argument 1

■ There are calculators for cosine and sine at www.rapidtables.com/calc/math/Cos Calculator.htm and
www.rapidtables.com/calc/math/Sin Calculator.htm .

Tip

In rotate_4.html, an <h1> heading was moved 215px along its vertical axis and then rotated through
90° counterclockwise using the following styles:

h1 {
transform: translateY(215px) rotate(-.25turn);
transform-origin: left top;
}