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
example:
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.
MULTIPLE TRANSFORMS
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
.
