2D Transformations 143
skew
To skew an element is to alter the angle of its horizontal or vertical axis (or
both axes). As with translate() and scale(), each axis has an individual
function—this time called skewX() and skewY().
E { transform: skewX(value) skewY(value);}
The arguments for the skew functions are angle values; I use degrees in
my examples. Negative values are permitted. I’ll give you three demonstra-
tions, using this code, to show you how they work:
h2.transform-1 { transform: skewX(15deg); }
h2.transform-2 { transform: skewY(5deg); }
h2.transform-3 { transform: skewX(15deg) skewY(-15deg); }
The results are illustrated in Figure 12-8.
Figure 12-8: Elements transformed by different values in the skew function
In the first example, the element is skewed by 15 degrees along its x-axis,
causing the vertical edges to slope diagonally. In the second^ example, the
skew is by 5 degrees on the y-axis, so the horizontal edges slope diagonally
whereas the vertical edges remain unchanged. The final example shows the
effect of two values being applied: 15 degrees on the x-axis and −15 degrees
on the y-axis, so the element is sloped on both axes.
Rotating with skew
By looking at the last example in the previous code block, you can see it’s
possible to replicate the rotate() function using skew. To do this, the angle
that you want to rotate the element by is given as a value to skewX() and the
inverse value to skewY(); that is, if skewX() is 15 degrees, then skewY() should
be −15 degrees, and vice versa. Therefore, the two functions in this code
example perform the same job:
E {
transform: rotate(15deg);
transform: skewX(15deg) skewY(-15deg);
}
You’ll find this information useful when I introduce the matrix() func-
tion later in this chapter.
