Combining Transforms

The transform property can accept as many functions as needed. 0:00 So you can use and combine them anyway you want. 0:04 It's common to use multiple transforms at once. 0:08 For example, you might want to rotate and 0:12 scale the size of an element at the same time. 0:14 Earlier we applied a small rotation to the top row of images on hover. 0:17 I really liked how that looked, so I'm going to add the rotation back in. 0:23 So I'll go back to interactions.css. 0:27 And in my image hover rule here, 0:31 I'm going to replace the translate function with the rotate function. 0:35 And I'll set the value to -5deg. 0:40 All right, so let's make this transformation a little 0:46 more amusing by combining rotate with a scale transform. 0:50 To do this I can simply add the scale function anywhere in the transform value. 0:56 And it will apply it to the image at the same time it applies the rotation. 1:01 So, right after the rotate function, I'll add the scale function and 1:06 set the value to 1.1. 1:10 So the images now rotate negative five degrees counterclockwise, 1:14 while they scale 1.1 times their size. 1:20 Now we can add more transforms if we need them. 1:22 So for example, back in my hover rule I'm going to add the translateY 1:25 function and set the value to negative 20 pixels. 1:32 Once we hover over an image, we can see that the images rotate, 1:39 scale, and translate up all at the same time. 1:43 Keep in mind that you can only define one transform declaration in a rule. 1:48 Otherwise, the bottom most declaration will override everything above it. 1:53 And this is a common mistake developers make when writing CSS transforms. 1:58 So, for example, later on I may want to add a skew transformation to these images. 2:02 So instead of writing the skew function here in the original list of values, 2:08 I might add it to the bottom of the rule like this. 2:14 So now the only transform we see applied is the skew. 2:24 Because the new transform declaration overrides the one written above it. 2:29 Now, this is just a simple example. 2:36 A small mistake like this is pretty easy to spot in one CSS rule, but sometimes you 2:38 may target the same element further down in your CSS and try to apply a transform. 2:44 This is how you'd most likely run into this problem. 2:50 So for instance, if I scroll all the way down to the bottom of my style sheet and 2:52 say img:hover and apply the skew transformation here in this rule, 2:58 once we refresh the browser once again the rotate and 3:03 scale transforms are gone on hover, they've been overwritten by the new rule. 3:07 Now, I really like the way the images move when we combined rotate and scale. 3:20 So, I'm going to stick with these two functions moving forward. 3:25