So, next I'm gonna create the rest of the icon transforms.

And they will all share the same transform origin.

So, I'm gonna group the icon selectors into one rule and

define the transform origin there.

So, back to my style sheet up here in my base rules.

I'll first target the class .gear-icon.

Then hammer-icon,

and heart-icon.

And inside this rule, I'll go ahead and cut the transform-origin

declaration out of the gear-icon rule and paste it inside this new rule here.

This way I'm not repeating the same transform origin property in each of

the icon rules.

So, next I want to rotate the hammer icon 45 degrees on hover,

so back in my style sheet under the HAMMER comment,

I'm going to create a new rule that targets the hammer-icon element,

once the hammer element is hovered.

So first I'll say .hammer:hovered and

then I'll target .hammer-icon.

Inside this rule, I'll add a transform property.

And as the value I'll use the rotate function and

I'm going to rotate it by 45 degrees.

So, now to give my icon a transition on both hover on and

hover off, I'll target hammer-icon at a transition property.

Then, as the value, I want to transition the transform property and set

the duration to 0.3 seconds, and again, the timing function will be ease-out.

All right, so let's save our style sheet, refresh the preview, and

once we hover over the hammer icon, we can see how it rotates 45 degrees on hover.

Pretty neat.

Finally, I want to scale the heart icon on hover.

So back in my style sheet under the HEART comment,

I'll target heart-icon once the heart element is hovered.

So first I'll say .heart:hover.

And then I'll target .heart-icon.

So in this rule, I'll add a transform property, and

I'll use the scale function to scale the heart icon by 1.3.

So next I'll need to create a transition, so to do that,

I'll target heart icon, add a transition.

And I'll wanna transition the transform property, and I'll set the transition

duration to 0.2 seconds, and once gain, the timing function will be ease-out.

All right, so once I save my style sheet and refresh the browser,

when I hover over the heart icon, we can see how it scales.

Neat.

So now no matter how small or large we make these icons, the transitions and

transforms will always look and work the same at any size.

So for example, if I go back to my style sheet and if I remove the svg width

of 32% and the float, when we take a look at it again,

we can see how the icons scale up to the size of my viewport.

But everything still looks and works great.

All my transitions in transform work exactly the same way.

If you wanna see examples of some of the neat effects we can create with

SVG transitions and transforms, in the teachers notes, I've posted a link to

a code pen containing these awesome animated weather icons by Noah Blon.