Here's the syntax for scale:

.scale:hover {
    transform: scale(1.4);
}

Hovering over the 'scale' link in our example produces this effect:

We've told the browser that when this element is hovered over, we want the element to scale to 1.4 times its original value.

Besides the values we've already used to enlarge elements, by using values below 1, we can shrink elements; the following will shrink the element to half its size:

transform: scale(0.5);

Here's the syntax for translate:

.translate:hover {
    transform: translate(-20px, -20px);
}

Here's the effect that rule has in our example:

The translate property tells the browser to move an element by an amount, defined in either pixels or percentages. The first value is the x axis and the second value is the y axis. Positive values given within parentheses move the element right or down; negative values move it left or up.

If you only pass one value then it is applied to the x axis. If you want to specify just one axis to translate an element you can also use translateX or translateY.

Using translate to center absolutely positioned elements

The translate provides a really useful way to center absolutely positioned elements within a relatively positioned container. You can view this example at example_08-03.

Consider this markup:

<div class="outer">
    <div class="inner"></div>
</div>

And then this CSS:

.outer {
    position: relative;
    height: 400px;
    background-color: #f90;
}

.inner {
    position: absolute;
    height: 200px;
    width: 200px;
    margin-top: -100px;
    margin-left: -100px;
    top: 50%;
    left: 50%;
}

You've perhaps done something similar to this yourself. When the dimensions of the absolutely positioned element are known (200px x 200px in this case) we can use negative margins to 'pull' the item back to the center. However, what happens when you want to include content and have no way of knowing how tall it will be? Transform to the rescue.

Let's add some random content into the inner box:

Yes, that problem! Right, let's use transform to sort this mess out.

.inner {
    position: absolute;
    width: 200px;
    background-color: #999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

And here is the result:

Here, top and left are positioning the inner box inside its container so that the top left corner of the inner box starts at a point 50% along and 50% down the outer. Then the transform is working on the inner element and positioning it negatively in those axis by half (-50%) of its own width and height. Nice!

The rotate transform allows you to rotate an element. Here's the syntax:

.rotate:hover {
    transform: rotate(30deg);
}

In the browser, here's what happens:

The value in parentheses should always be in degrees (for example, 90deg). While positive values always apply clockwise, using negative values will rotate the element counter-clockwise. You can also go crazy and make elements spin by specifying a value like the following:

transform: rotate(3600deg);

This will rotate the element 10 times in a complete circle. Practical uses for this particular value are few and far between but you know, if you ever find yourself designing websites for a windmill company, it may come in handy.

If you've spent any time working in Photoshop, you'll have a good idea what skew will do. It allows an element to be skewed on either or both of its axes. Here's the code for our example:

.skew:hover {
    transform: skew(40deg, 12deg);
}

Setting this on the hover link produces the following effect on hover:

The first value is the skew applied to the x axis (in our example, 40deg), while the second (12deg) is for the y axis. Omitting the second value means any value will merely be applied to the x axis (horizontal). For example:

transform: skew(10deg);

Did somebody mention a completely over-rated film? No? What's that? You want to know about the CSS3 matrix, not the film? Oh, okay.

I'm not going to lie. I think the matrix transform syntax looks scary. Here's our example code:

.matrix:hover {
    transform: matrix(1.678, -0.256, 1.522, 2.333, -51.533, -1.989);
}

It essentially allows you to combine a number of other transforms (scale, rotate, skew, and so on) into a single declaration. The preceding declaration results in the following effect in the browser:

Now, I like a challenge like the best of them (unless, you know, it's sitting through the Twilight films) but I'm sure we can agree that syntax is a bit testing. For me, things got worse when I looked at the specification and realized that it involved mathematics knowledge beyond my rudimentary level to fully understand: http://www.w3.org/TR/css3-2d-transforms/

Notice how with CSS, the default transform origin (the point at which the browser uses as the center for the transform) is in the middle: 50% along the x axis and 50% along the y axis of the element. This differs from SVG which defaults to top left (or 0 0).

Using the transform-origin property we can amend the point from which transforms originate.

Consider our earlier matrix transform. The default transform-origin is '50% 50%' (the center of the element). The Firefox developer tools show how the transform is applied:

Now, if we adjust the transform-origin like this:

.matrix:hover {
   transform: matrix(1.678, -0.256, 1.522, 2.333, -51.533, -1.989);
   transform-origin: 270px 20px;
}

Then you can see the effect this has:

The first value is the horizontal offset and the second value is the vertical offset. You can use keywords. For example, left is equal to 0% horizontal, right is equal to 100% horizontal, top is equal to 0% vertical, and bottom is equal to 100% vertical. Alternatively, you can use a length, using any of the CSS length units.

If you use a percentage for the transform-origin values, then the horizontal/vertical offset is relative to the height/width of the elements bounding box.

If you use a length, then the values are measured from the top-left corner of the elements bounding box.

Full information on the transform-origin property can be found at http://www.w3.org/TR/css3-2d-transforms/.

That covers the essentials of 2D transforms. They are far more widely implemented than their 3D brethren and provide a far better means to move elements around the screen than older methods such as absolute positioning.

Read the full specification on CSS3 2D Transforms Module Level 3 at http://www.w3.org/TR/css3-2d-transforms/.