jQuery 1.4 Animation Techniques - Index of

CSS3 Animations
The following transform functions are defined:
Function Example usage Description of the transform
matrix matrix(a, b, c, d, e, f) Rotates, scales, skews, or translates the element
according to the combination of supplied
parameters.
rotate rotate(x) Rotates the element the specified number of
degrees around the transform-origin. By default,
the origin should be the center of the element.
scale scale(x, y) Scales the element the specified number of units
along the x and y axes. If y is not supplied, it is
assumed to be the same as x.
scaleX scale(x) Scales the element the specified number of units
along the x axis.
scaleY scale(y) Scales the element the specified number of units
along the y axis.
skew skew(x, y) Skews the element the specified number of
degrees along the x and y axes. If y is not supplied
it is assumed to be 0.
skewX skew(x) Skews the element the specified number of
degrees along the x axis.
skewY skew(y) Skews the element the specified number of
degrees along the y axis.
translate translate(x, y) Repositions the element the specified number of
pixels along the x and y axes. If y is not provided it
is assumed to be 0.
translateX translate(x) Repositions the element the specified number of
pixels along the x axis.
translateY translate(y) Repositions the element the specified number of
pixels along the y axis.
Understanding the matrix
All of the individual transform functions (rotate(), skew(), among others) can be thought
of as shortcuts for specific matrix transforms. Indeed, most browsers will apply a matrix
behind-the-scenes even when a transform function is provided.
The matrix takes six parameters, and each of the above transforms can be performed by
providing different combinations of values for these parameters. Sometimes we can apply
several transforms simultaneously by using the matrix. Let's look at some quick examples
to illustrate how the matrix can be used.
[ 232 ]