- Rotating Elements 4:37
- Animating a CSS Transform 4:22
- Skewing Content 3:48
- Scaling Elements 3:12
- Changing the Transform Position with transform-origin 7:01
- Moving Content with translate() 4:55
- Creating a Slide Transition 5:39
- Combining Transforms 3:36
- CSS Transforms Challenge 2 objectives
- Custom Timing Functions with cubic-bezier() 6:43
- Review: Getting Started with CSS Transforms 7 questions
Preview
Video Player
00:00
00:00
Combining Transforms
3:36It'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.
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