HTML and CSS Reference
FIGURE 5.6 Skewing the
If you want to scale only in a single direction, you could set the direction you
don't want to scale to 1, for example:
But it is more e cient and intuitive to specify a single value for scaling—either
Try experimenting with different values to see the results!
SKEW, SKEWX, SKEWY
skew is rather fun because you can use it to squish an element, changing it from
a square or rectangular box into a rhombus or parallelogram. This transform is
rather handy if you want to transform certain elements to create some sort of
perspective effect—for example, an isometric view—or fit text onto a background
shape that isn't flat.
To s e e h To w t h i s t ra n s fo r m w To r k s , To p e n t h e t ra n s fo r m - 2 d s ke w. h t m l e x a m p l e .
In it you'll find the following line:
which produces the effect shown in Figure 5.6 .