Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.

Preview

Start a free Basic 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.

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

Browser Support

  • 0:00

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

  • 0:03

    And they will all share the same transform origin.

  • 0:07

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

  • 0:10

    define the transform origin there.

  • 0:13

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

  • 0:17

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

  • 0:21

    Then hammer-icon,

  • 0:26

    and heart-icon.

  • 0:30

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

  • 0:35

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

  • 0:40

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

  • 0:45

    the icon rules.

  • 0:46

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

  • 0:51

    so back in my style sheet under the HAMMER comment,

  • 0:55

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

  • 1:00

    once the hammer element is hovered.

  • 1:03

    So first I'll say .hammer:hovered and

  • 1:08

    then I'll target .hammer-icon.

  • 1:13

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

  • 1:16

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

  • 1:20

    I'm going to rotate it by 45 degrees.

  • 1:23

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

  • 1:29

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

  • 1:39

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

  • 1:43

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

  • 1:48

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

  • 1:53

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

  • 1:59

    Pretty neat.

  • 2:00

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

  • 2:04

    So back in my style sheet under the HEART comment,

  • 2:07

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

  • 2:12

    So first I'll say .heart:hover.

  • 2:16

    And then I'll target .heart-icon.

  • 2:21

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

  • 2:25

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

  • 2:30

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

  • 2:35

    I'll target heart icon, add a transition.

  • 2:40

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

  • 2:45

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

  • 2:50

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

  • 2:54

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

  • 3:00

    Neat.

  • 3:01

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

  • 3:06

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

  • 3:11

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

  • 3:17

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

  • 3:22

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

  • 3:26

    But everything still looks and works great.

  • 3:29

    All my transitions in transform work exactly the same way.

  • 3:36

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

  • 3:39

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

  • 3:44

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

You need to sign up for Treehouse in order to download course files.

Sign up