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.

CSS3 <strong>Animation</strong>s<br />

The filter property is used in a very similar way to the CSS3 version. For example, to rotate<br />

an element by 15 degrees, we could use the following CSS:<br />

progid:DXImageTransform.Micros<strong>of</strong>t.Matrix(<br />

M11=<strong>1.4</strong>488887394336025,<br />

M12=-0.388228567653781,<br />

M21=0.388228567653781,<br />

M22=<strong>1.4</strong>488887394336025,<br />

SizingMethod='auto expand'<br />

);<br />

This code produces the following effect in IE8:<br />

As you may notice in the previous screenshot, the size <strong>of</strong> the element has increased<br />

considerably. This is due to the sizingMethod being set to auto expand. Another<br />

thing you may notice is that two <strong>of</strong> the parameters are reversed in IE's implementation<br />

<strong>of</strong> the matrix (parameters b and c).<br />

Instead <strong>of</strong> hiding some <strong>of</strong> the content outside <strong>of</strong> the viewport, IE has repositioned the<br />

element so that it remains entirely visible. This may or may not be beneficial depending<br />

on the circumstances <strong>of</strong> a particular implementation.<br />

[ 240 ]

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

Saved successfully!

Ooh no, something went wrong!