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,.9);

Notice that by using a value of .9 for both the width and height, we're actually making our buttons smaller, nine-tenths of their original size:

Let's add the scale property again to the buttons' hover/focus state to get even neater interaction:

.button:focus,
.button:hover {
  background-color: #333...