Transforms

Like transitions, transforms are a feature of CSS3. They have a little more support though as all major browsers, including IE9 and up, provide support. Transforms allow you to do several things, including rotate, scale, and translate. We'll look at a few practical examples in this section. First, we'll apply a scale to our button, then we'll do a translation, followed by a unique use of the rotate value.

Applying a scale to our button

Let's jump right in where we left off with our button in the CSS. Underneath the transitions, let's add a transform. We'll add transform: scale(.9, .9), like so:

-o-transition: .25s all ease-in-out;
transition: .25s all ease-in-out;
transform: scale(.9...