The transform property can accept as many functions as needed.

So you can use and combine them anyway you want.

It's common to use multiple transforms at once.

For example, you might want to rotate and

scale the size of an element at the same time.

Earlier we applied a small rotation to the top row of images on hover.

I really liked how that looked, so I'm going to add the rotation back in.

So I'll go back to interactions.css.

And in my image hover rule here,

I'm going to replace the translate function with the rotate function.

And I'll set the value to -5deg.

All right, so let's make this transformation a little

more amusing by combining rotate with a scale transform.

To do this I can simply add the scale function anywhere in the transform value.

And it will apply it to the image at the same time it applies the rotation.

So, right after the rotate function, I'll add the scale function and

set the value to 1.1.

So the images now rotate negative five degrees counterclockwise,

while they scale 1.1 times their size.

Now we can add more transforms if we need them.

So for example, back in my hover rule I'm going to add the translateY

function and set the value to negative 20 pixels.

Once we hover over an image, we can see that the images rotate,

scale, and translate up all at the same time.

Keep in mind that you can only define one transform declaration in a rule.

Otherwise, the bottom most declaration will override everything above it.

And this is a common mistake developers make when writing CSS transforms.

So, for example, later on I may want to add a skew transformation to these images.

So instead of writing the skew function here in the original list of values,

I might add it to the bottom of the rule like this.

So now the only transform we see applied is the skew.

Because the new transform declaration overrides the one written above it.

Now, this is just a simple example.

A small mistake like this is pretty easy to spot in one CSS rule, but sometimes you

may target the same element further down in your CSS and try to apply a transform.

This is how you'd most likely run into this problem.

So for instance, if I scroll all the way down to the bottom of my style sheet and

say img:hover and apply the skew transformation here in this rule,

once we refresh the browser once again the rotate and

scale transforms are gone on hover, they've been overwritten by the new rule.

Now, I really like the way the images move when we combined rotate and scale.

So, I'm going to stick with these two functions moving forward.