« Back to Tutorial
The following transforms all elapse over 3 seconds using a CSS3 transition declaration. Click each image to see the transforms unfold, clicking again to return them to their original positions.
Translate 200 X and 50 Y, adding a margin at the bottom to prevent overlapping:
Rotate 360 degrees clockwise:
Scale by 2 times on the X axis and 0.5 on the Y, using the top left point as origin:
Skew 20 degrees X and -10 degrees Y, adding top and left margins to keep the picture within the visible page: