jQuery 1.4 Animation Techniques - Index of

CSS3 Animations
Calculating the sine and cosine functions of the angle of rotation can easily be done using
a scientific calculator, or of course, JavaScript itself programmatically.
Working with transforms
Using the short-cut transform functions such as rotate(), or skew() is easier and more
convenient than using the matrix. However, this ease of use comes at a price—we're limited
to only using one of them at a time on a single element. If we were to try and use more than
one of them in a CSS statement, only the last one defined would be applied.
If we need to apply several different transforms to an element, we can use the matrix
function, depending on which transformations we need to apply. For example, we can
skew an element, while also translating and scaling it using something like the following:
transform: matrix(2, -1, 0, 2, 300px, 0);
In this example, the element would be skewed along the x axis, doubled in size and moved
300 px to the right. We couldn't rotate the targeted element in the previous code-snippet at
the same time as doing these things.
Even if we supply two matrix functions, one for the skew, scale and translate, and a second
for the rotation, only the rotation would be applied. We can however rotate and translate,
or rotate and scale an element simultaneously using a single matrix function.
jQuery and transforms
We can use jQuery's css() method in setter mode to set CSS3 transforms on selected
elements, and we can use it in getter mode to retrieve any transform functions set on an
element. We just need to ensure that we use the correct vendor prefix, such as –moztransform
for Firefox, or -webkit-transform for Webkit-based browsers. Opera also
has its own vendor prefix, as do newer versions of IE.
One thing to be aware of is that while we can set a specific transform function, such as
rotate(), on a selected element, we can only get the value of the style property in its
matrix format. Look at the following code:
$("#get").css("-moz-transform", "rotate(30deg)");
$("#get").text($("#get").css("-moz-transform"));
This would result in the following:
[ 238 ]