144 Chapter 12
The skew() Shorthand Function
The CSS Transforms module and various online sources also list a short-
hand skew() function that accepts the two individual skew functions as values
(in the same way that translate() accepts the translate functions):E { transform: skew(skewX(),skewY()); }I highly recommend, however, you don’t use this function, as for some
arcane mathematical reasons, which I don’t understand, it’s considered
redundant. It’s only defined for legacy purposes; the shorthand func-
tion was implemented in some older browsers before the redundancy was
noticed. If you require skew on both axes, use skewX() and skewY() instead.An Important Note About Transformation Functions
When you set the value of the transform property, any functions that you
don’t list will be presumed to be reset to their default values. To see what I
mean, take a look at this CSS snippet where a rule is applied to a div selec-
tor to rotate and scale it and another to a .foo selector to rotate it with a dif-
ferent value argument:div { transform: rotate(5deg) scale(2); }
.foo { transform: rotate(10deg); }If these rules were applied to a div with a class of .foo, the element
would be only rotated by 10 degrees and not scaled; as the scale() function
is not specified, its value argument is treated as the default, 0deg. To apply
both properties, you have to update the code to include the scale() func-
tion in the rule applied to .foo:div { transform: rotate(5deg) scale(2); }
.foo { transform: rotate(10deg) scale(2); }Transforming Elements with Matrices
Each of the transformation functions used in this chapter so far can also
be expressed as a transformation matrix. Rather than explaining the theory
behind transformation matrices (which is quite complex and could easily
be a chapter of its own), I’ll just show you how they can be applied to ele-
ments in CSS through use of the matrix() function.
I’ll keep the explanation as simple as possible and just give you the
practical basics. If you really want to dig into the theory, I suggest you read
the W3C’s explanation in the SVG 1.1 module (http://www.w3.org/TR/SVG/
coords.html#TransformMatrixDefined/).