Compared to rotate, the remaining 2D transformations in CSS are probably of less utility: scale and translate have always been available in one form or another in CSS, by modifying element's width and height, or positioning them using relative or absolute position. The primary advantages of using the CSS transform 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. For clarity, the CSS declaration is shown without vendor prefixes:

img#car {
	transform: skewX(21deg);
}

You can also skew vertically: skewY(21deg) ). 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 CSS.

scale

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

img#car {
	transform: scale(2);
}

As with rotate and the other CSS 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 CSS… examples of which we will explore next.

img#obj {
	transform: translateX(2em);
}

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.