- 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
Animating a CSS Transform
4:22The 'transform' property is animatable, so animating a CSS transform is just as simple as transitioning a CSS property.
Transforms are not animated by default.
0:00
And they don't need to be triggered
by an action like transitions do.
0:02
Transforms are applied immediately unless
you define them in a state change,
0:06
like on hover.
0:10
So, let's do that.
0:12
I'll go back to my style sheet.
0:13
And right below the img rule,
0:15
I'm going to create a new rule
that targets images on hover.
0:18
Then I'll add the transform property and
define the rotate function as the value.
0:24
And then I'll go ahead and delete
the transform declaration in the img rule.
0:29
Because now we're going
to rotate to zero degrees
0:34
to the value we defined
here in the hover rule.
0:37
So, let's make this value -15deg.
0:40
So, when we take a look at
this in the browser and
0:44
hover over an image, we can see that
the transformation on hover is static.
0:46
So, the rotation changes abruptly
from 0 to negative 15 degrees.
0:51
The great thing is that transform
is an animatable property.
0:57
So that means we can
animate any transform.
1:01
Animating a CSS transform is just as
simple as transitioning a CSS property.
1:04
In fact,
by combining transforms with transitions,
1:09
we're able to create really
cool visual effects with CSS.
1:13
Together they're like a CSS power duo.
1:16
With a transition I'm able to control this
rotation making it smooth and gradual.
1:19
So, back in my style sheet,
1:25
I'm going to apply a transition to
my images here in the img rule.
1:27
So I'll type the transition property, and
1:33
I specifically want a transition for
my transformed functions.
1:36
So, I'm going to write transform
as the transition property.
1:40
And then I'll set the duration to .5s.
1:46
All right, so
now the rotations come to life.
1:51
They animate from 0 to negative
15 degrees on hover, cool.
1:55
So now's great time to experiment with
rotation values and have a little fun.
2:02
So, to see my images
spin a full 360 degrees,
2:07
I can change the value here in
the hover rule to 360 degrees.
2:12
So, now we see the transition for
a full rotation.
2:20
Now if you want the image to rotate
more than one full rotation,
2:28
you can use a more
intuitive unit like turn.
2:32
So, one turn equals one full rotation.
2:36
And as we can see, it produces
the same effect as 360 degrees.
2:43
So its one complete rotation.
2:48
But if I change the value to 2turn,
now the images rotate twice.
2:51
So now we're seeing this intense
spinning effect in our images.
2:59
So if you ever wanna recreate that
spinning Batman logo with CSS,
3:03
turn would be your go to unit because
it produces exactly what you want.
3:07
Now, I don't wanna make my users
dizzy with this spinning effect so
3:12
I'm going to change the rotate value
to something smaller, let's say, -5deg.
3:17
Cool, so this small counterclockwise
rotation is subtle yet effective.
3:28
Now, the gallery icon up
top is also an image, so
3:32
let's give it a slight rotation on hover.
3:36
So back in my style sheet,
I'll scroll down here to the Logo comment.
3:39
And I'll target the logo on hover and
give it a transform property.
3:45
I'm going to define the rotate() function,
and let's rotate it by -20deg.
3:55
Nice, so small details like
this can delight your users and
4:05
add a sort of whimsical
touch to your interactions.
4:09
In an upcoming video you'll learn how to
make rotations even more interesting by
4:13
combining them with other transforms,
like scale and translate.
4:17