HTML and CSS Reference

In-Depth Information

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

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

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;

}