jQuery 1.4 Animation Techniques - Index of

CSS3 Animations
If, like me, you thought the 2D transform matrix, with its six parameters, was complex and
perhaps a little hard to understand, wait till you start using the 3D matrix, which has 16
parameters in total!
At present 3D transforms are only supported in Webkit-based browsers, so we won't be
looking at these in any further detail. But hopefully they'll be appearing in more browsers
sooner rather than later.
Animated rotation with jQuery and CSS3
In this example, we'll set up an animation that rotates an image using the rotate()
transform function. Because this is supported by the majority of common browsers it's
actually really easy to implement, and can be a great effect that enhances the appearance
and behavior of the page it is used on.
Time for action – animating an element's rotation
We'll just be rotating a simple image in this example, so this is the only visible element we
need in the of the page.
1. Add the following to a fresh copy of the template file:
2. At this point we don't even need any styles as everything we need to set can be
done in the JavaScript, which we'll add next.
3. In the function at the bottom of the HTML page, add the following code:
var img = $("#colorWheel"),
offset = img.offset(),
origWidth = img.width(),
origHeight = img.height(),
rotateStrings = [
"rotate(",
0,
"deg)"
],
getVendor = function() {
var prefix = null,
vendorStrings = {
pure: "transform",
[ 242 ]