Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video, you'll create the rotation and scale transforms for the hammer and heart SVG icons.
Update
If the rotation appears off-center, apply transform-box: fill-box
to your SVG, like so:
.gear-icon,
.hammer-icon,
.heart-icon {
transform-origin: 50% 50%;
transform-box: fill-box;
}
You can learn more about transform-box
on MDN.
Examples
Quick Reference
Related Videos
- Getting Started with CSS Transforms - Rotating Elements
- Getting Started with CSS Transforms - Scaling Elements
Browser Support
So, next I'm gonna create
the rest of the icon transforms.
0:00
And they will all share
the same transform origin.
0:03
So, I'm gonna group the icon
selectors into one rule and
0:07
define the transform origin there.
0:10
So, back to my style sheet
up here in my base rules.
0:13
I'll first target the class .gear-icon.
0:17
Then hammer-icon,
0:21
and heart-icon.
0:26
And inside this rule, I'll go ahead and
cut the transform-origin
0:30
declaration out of the gear-icon rule and
paste it inside this new rule here.
0:35
This way I'm not repeating the same
transform origin property in each of
0:40
the icon rules.
0:45
So, next I want to rotate the hammer
icon 45 degrees on hover,
0:46
so back in my style sheet
under the HAMMER comment,
0:51
I'm going to create a new rule that
targets the hammer-icon element,
0:55
once the hammer element is hovered.
1:00
So first I'll say .hammer:hovered and
1:03
then I'll target .hammer-icon.
1:08
Inside this rule,
I'll add a transform property.
1:13
And as the value I'll use
the rotate function and
1:16
I'm going to rotate it by 45 degrees.
1:20
So, now to give my icon
a transition on both hover on and
1:23
hover off, I'll target hammer-icon
at a transition property.
1:29
Then, as the value, I want to transition
the transform property and set
1:39
the duration to 0.3 seconds, and again,
the timing function will be ease-out.
1:43
All right, so let's save our style sheet,
refresh the preview, and
1:48
once we hover over the hammer icon, we can
see how it rotates 45 degrees on hover.
1:53
Pretty neat.
1:59
Finally, I want to scale
the heart icon on hover.
2:00
So back in my style sheet
under the HEART comment,
2:04
I'll target heart-icon once
the heart element is hovered.
2:07
So first I'll say .heart:hover.
2:12
And then I'll target .heart-icon.
2:16
So in this rule,
I'll add a transform property, and
2:21
I'll use the scale function to
scale the heart icon by 1.3.
2:25
So next I'll need to create a transition,
so to do that,
2:30
I'll target heart icon, add a transition.
2:35
And I'll wanna transition the transform
property, and I'll set the transition
2:40
duration to 0.2 seconds, and once gain,
the timing function will be ease-out.
2:45
All right, so once I save my style
sheet and refresh the browser,
2:50
when I hover over the heart icon,
we can see how it scales.
2:54
Neat.
3:00
So now no matter how small or large we
make these icons, the transitions and
3:01
transforms will always look and
work the same at any size.
3:06
So for example, if I go back to my style
sheet and if I remove the svg width
3:11
of 32% and the float,
when we take a look at it again,
3:17
we can see how the icons scale
up to the size of my viewport.
3:22
But everything still looks and
works great.
3:26
All my transitions in transform
work exactly the same way.
3:29
If you wanna see examples of some of
the neat effects we can create with
3:36
SVG transitions and transforms, in
the teachers notes, I've posted a link to
3:39
a code pen containing these awesome
animated weather icons by Noah Blon.
3:44
You need to sign up for Treehouse in order to download course files.
Sign up