Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Combining Transforms

3:36 with Guil Hernandez

It's common to use multiple transforms at once. The 'transform' property can accept as many functions as needed, so you can use and combine them any way you want.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

Resources

Video review

It's common to use multiple transforms at once.
For example: transform: rotate(-5deg) scale(1.1);
Define only one transform declaration in a rule, otherwise the bottom-most declaration will override the transforms above.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

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

You need to sign up for Treehouse in order to download course files.

Sign up

You need to sign up for Treehouse in order to set up Workspace

Sign up