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