CSS3 2D transformations

Despite sounding similar, CSS transformations (both 2D and 3D variants) are entirely different to CSS transitions. Think of it like this: transitions smooth the change from one state to another, while transformations are defining what the element will become. My own (admittedly childish) way of remembering it is like this:

Imagine a Transformer robot like Optimus Prime. He's a robot that becomes something else (transforms) over a period of time (the transition) into a truck.

In case that tangent muddied the waters further (or you don't have a clue who Optimus Prime is) let's just dig in. Let's add a 2D transition to the hover state of the navigation links on the AND THE WINNER ISN'T site:

nav ul li a:hover {
    transform: scale(1.7);
}

Now, in a modern browser, hovering over a link produces this effect:

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

Now, if you're attempting to add this rule...