Using CSS3 Transforms to Manipulate Page Elements - Demonstrations

« 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:

nice_picture

Rotate 360 degrees clockwise:

nice_picture

Scale by 2 times on the X axis and 0.5 on the Y, using the top left point as origin:

nice_picture

Skew 20 degrees X and -10 degrees Y, adding top and left margins to keep the picture within the visible page:

nice_picture