HTML and CSS Reference
In-Depth Information
FIGURE 5.6 Skewing the
example container.
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:
transform: scale(1.25,1);
But it is more e cient and intuitive to specify a single value for scaling—either
transform: scaleX(1.25);
or vertically:
transform: scaleY(1.25);
Try experimenting with different values to see the results!
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:
transform: skew(10deg,13deg);
which produces the effect shown in Figure 5.6 .
Search WWH ::

Custom Search