Sprite Shearing

WARNING: FireFox cannot correctly run a shearing effect.
This bug in FireFox has been submitted to Bugzilla (661452)

Specifically, if the shearing operation operates such that the sprite is 0 (zero) size either vertically or horizontally, then you entire animation will cease to function. This occurs when a shear "crosses over" itself. For example when the top of the sprite shears down past the bottom of the sprite. The bug may not occur immediately, but will eventually.

I hope they fix it soon.

Shearing a sprite (which is easier to show, than explain), shears the sprite around the given center along either the x or y axis. You may also shear on both axes simultaneously by specifying a type of "xy". A shear value of 1 is equivalent to shearing the distance of the sprite size along that axis. Therefore shear value of 2 (along the x-axis) will make the sprite 3 times wider than its original size. The shear value is actually set with the "until" property because you shear until that value is reached.



Tipping Sprites

You can combine a shearing effect with scaling to simulate a sprite falling forward as in this example.