Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Rotating and Scaling SVG

3:50 with Guil Hernandez

In this video, you'll create the rotation and scale transforms for the hammer and heart SVG icons.

Teacher's Notes
Video Transcript
Downloads

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

Animated weather icons by Noah Blon

Quick Reference

Browser Support

CSS transforms

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