Compared to rotate, the remaining 2D transformations in CSS3 are probably of less utility: scale and translate have always been available in one form or another in CSS, by modifying the width and height of images, or positioning elements using relative or absolute position. The primary advantages of using the new CSS3 values is that they are more direct, and can be animated with great ease.

skew

skew is probably the trickiest of these to understand, as its values (in degrees) don't appear to apply in the ways that one might expect. To me, the easiest way to consider skew is to think of the values as “pulling” on opposite sides of the element box to create the angle specified:

As this would appear in a CSS declaration:

1. img#car { -moz-transform: skew(21deg); -ms-transform: skew(21deg);
2. -o-transform: skew(21deg); transform: skew(21deg); }

By default, skew is in the horizontal (x) direction. You can also skew in both directions at once ( skew(21deg,10deg) ) or in separate directions ( skewX(21deg), skewY(10deg) ). Negative skew values will tilt the element in the opposite direction. Used together, and with careful positioning, it is possible to produce a “box” effect from three equally-sized images, a hint that 3D effects are achievable in CSS3.

scale

scale is a simply a scalar value: a multiplier by which the size of the element is decreased or increased:

1. img#car { -moz-transform: scale(2); -ms-transform: scale(2);
2. -o-transform: scale(2); transform: scale(2); }

As with rotate and the other CSS3 transformations, a scaled element does not influence its surroundings.

Again, scale can be constrained to the x and y values alone, via scaleX and scaleY.

translate

translate moves the element from its current location. In this respect, it is very similar to relative positioning. The property doesn't offer many advantages over relative positioning in itself, but it can be animated very smoothly in CSS3… examples of which we will explore next.

1. img#obj { -moz-transform: translateX(2em); -ms-transform: translateX(2em);
2. -o-transform: translateX(2em); transform: translateX(2em); }