HTML and CSS Reference
In-Depth Information
skew
The
skew()
function, along with
skewX()
and
skewY()
, lets us distort the shape of an
element along the x or y axes. So, for example, if we had a box that was sized at 200px by
100px, and we applied the following skew:
.box {
transform: skew(-30deg, 10deg);
}
...then the result would look something like
Figure 5.3
.
Figure 5.3. A box skewed with CSS transforms
Multiple Transforms on a Single Element
As is the case with transitions, if we want to apply more than one type of transform on a
single element, we can't define multiple transform properties. Instead, we have to do the fol-
lowing, which is slightly different from how we accomplished this earlier with transitions:
.box {
transform: scale(1.2, 1.5) skew(-30deg, 10deg);
}
This puts two transforms in a single transform declaration, separating the transform functions
using a space (instead of a comma). With this syntax, the scale and skew transforms will both
be applied to the targeted element.
