02.06.2013 Views

jQuery 1.4 Animation Techniques - Index of

jQuery 1.4 Animation Techniques - Index of

jQuery 1.4 Animation Techniques - Index of

SHOW MORE
SHOW LESS

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

[ 241 ]<br />

Chapter 9<br />

Setting the auto expand parameter causes the image to increase in size, which is a slight<br />

inconvenience to say the least. However if we don't set this, the element will be clipped,<br />

as shown in the following screenshot:<br />

Clipping pretty much destroys our simple box (and the content is still scaled), as we can see<br />

in the previous screenshot.<br />

CSS3 3D transforms<br />

All <strong>of</strong> the transform functions we have looked at so far are two-dimensional, operating on<br />

just the x and y axes. Transforms that operate in three dimensions, along x, y, and z axes have<br />

also been proposed.<br />

3D equivalents <strong>of</strong> all <strong>of</strong> the transform functions exist and usually just take an extra parameter<br />

which corresponds to the vector <strong>of</strong> each dimension, and the angle. For example, a 3D<br />

rotation could be added using this code:<br />

transform: rotate3d(0, 1, 0, 30deg);<br />

As with 2D transforms, there is an all-encompassing matrix function that allows us to<br />

implement any <strong>of</strong> the other transforms and allows us to combine some <strong>of</strong> them together<br />

on a single element.

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!