HTML and CSS Reference
In-Depth Information
FIGURE 5.7 Applying multiple
transforms to the example.
skew accepts the same unit values as rotate , but it works in a different way.
Instead of the whole element being rotated but looking the same, it is deformed
by three degrees horizontally and ten degrees vertically. In real terms, this might
seem a bit illogical, because the three degrees x value is applied to the vertical sides
(they are slanted three degrees off vertical) and the ten degrees y value is applied
to the horizontal sides (they are slanted ten degrees off horizontal). Just think of it
this way: The x and y values refer to the axes the shape is distorted along.
If you want to skew an element in only one direction, use skewX or skewY . For
transform: skewX(3deg);
transform: skewY(10deg);
TIP: As you'd expect, you can use negative values to skew
the element in the other direction, vertically/horizontally.
Yo u c a in a p p l y m u l t i p l e t r a in s f o r m s i in t h e s a m e r u l e b y i in c l u d i in g t h e m a l l i in t h e
same property separated by spaces.
In the example file multiple_2dtransform.html, you'll find the following trans-
form line:
transform: skew(-3deg,-10deg) translateX(-200px) scale(0.7)
p rotate(10deg);
The effect is shown in Figure 5.7 .
Search WWH ::

Custom Search