jQuery 1.4 Animation Techniques - Index of

For example, we could simply use a PNG with no transparency, which would preserve the
circle's border in IE (in this example). Or, we could lay another image over the top of the
image we are rotating to hide the jagged edges.
Pop quiz – implementing CSS3 rotation
[ 247 ]
Chapter 9
1. In this example we used an array in conjunction with the JavaScript join() method
to create the string. Why?
a. Because it's more fun
b. Because it makes our code look better
c. Because performance-wise, it's much faster than string concatenation
d. Because otherwise the element won't rotate correctly
2. To make the animation run correctly in Internet Explorer we had to constantly adjust
the top and left style properties of the rotated element in order to maintain its
position. Why does the drift in IE occur?
a. Because the size of the rotated element's bounding box is changed
throughout the animation. As the rotated element is centered within its
bounding box, its position changes as the box increases and decreases in size
b. Because the alpha layer of the PNG was removed
c. Because the Matrix filter property was used
d. Because of a bug in IE's implementation of the CSS3 rotate property
Have a go hero – extending CSS3 rotation
The rotation effect can be used in many places, whether animated or not, but when
animated as in this example, it makes a very good background as part of a larger composition
of elements. Used as the background of a semi-transparent logo for example, creates a
stunning effect.
Have a go at incorporating the effect into a page and using it as the background of another
image. You'll also see first-hand how much this can improve the appearance of the effect
in IE.
Animated skewing
Just like with the rotate() function, we can animate a skew() transform for creating
attractive special effects. In this example, we'll use the matrix() function for all browsers,
not just IE, in order to apply several transforms to an element at once.