1
00:00:00,180 --> 00:00:03,960
So, next I'm gonna create
the rest of the icon transforms.

2
00:00:03,960 --> 00:00:07,478
And they will all share
the same transform origin.

3
00:00:07,478 --> 00:00:10,890
So, I'm gonna group the icon
selectors into one rule and

4
00:00:10,890 --> 00:00:13,190
define the transform origin there.

5
00:00:13,190 --> 00:00:16,670
So, back to my style sheet
up here in my base rules.

6
00:00:17,780 --> 00:00:21,126
I'll first target the class .gear-icon.

7
00:00:21,126 --> 00:00:26,231
Then hammer-icon,

8
00:00:26,231 --> 00:00:30,700
and heart-icon.

9
00:00:30,700 --> 00:00:35,460
And inside this rule, I'll go ahead and
cut the transform-origin

10
00:00:35,460 --> 00:00:40,280
declaration out of the gear-icon rule and
paste it inside this new rule here.

11
00:00:40,280 --> 00:00:45,160
This way I'm not repeating the same
transform origin property in each of

12
00:00:45,160 --> 00:00:46,287
the icon rules.

13
00:00:46,287 --> 00:00:51,313
So, next I want to rotate the hammer
icon 45 degrees on hover,

14
00:00:51,313 --> 00:00:55,317
so back in my style sheet
under the HAMMER comment,

15
00:00:55,317 --> 00:01:00,903
I'm going to create a new rule that
targets the hammer-icon element,

16
00:01:00,903 --> 00:01:03,813
once the hammer element is hovered.

17
00:01:03,813 --> 00:01:08,802
So first I'll say .hammer:hovered and

18
00:01:08,802 --> 00:01:13,250
then I'll target .hammer-icon.

19
00:01:13,250 --> 00:01:16,890
Inside this rule,
I'll add a transform property.

20
00:01:16,890 --> 00:01:20,729
And as the value I'll use
the rotate function and

21
00:01:20,729 --> 00:01:23,917
I'm going to rotate it by 45 degrees.

22
00:01:23,917 --> 00:01:29,136
So, now to give my icon
a transition on both hover on and

23
00:01:29,136 --> 00:01:35,496
hover off, I'll target hammer-icon
at a transition property.

24
00:01:39,860 --> 00:01:43,889
Then, as the value, I want to transition
the transform property and set

25
00:01:43,889 --> 00:01:48,680
the duration to 0.3 seconds, and again,
the timing function will be ease-out.

26
00:01:48,680 --> 00:01:53,610
All right, so let's save our style sheet,
refresh the preview, and

27
00:01:53,610 --> 00:01:59,270
once we hover over the hammer icon, we can
see how it rotates 45 degrees on hover.

28
00:01:59,270 --> 00:02:00,370
Pretty neat.

29
00:02:00,370 --> 00:02:04,260
Finally, I want to scale
the heart icon on hover.

30
00:02:04,260 --> 00:02:07,578
So back in my style sheet
under the HEART comment,

31
00:02:07,578 --> 00:02:12,010
I'll target heart-icon once
the heart element is hovered.

32
00:02:12,010 --> 00:02:16,290
So first I'll say .heart:hover.

33
00:02:16,290 --> 00:02:21,340
And then I'll target .heart-icon.

34
00:02:21,340 --> 00:02:25,411
So in this rule,
I'll add a transform property, and

35
00:02:25,411 --> 00:02:30,216
I'll use the scale function to
scale the heart icon by 1.3.

36
00:02:30,216 --> 00:02:35,978
So next I'll need to create a transition,
so to do that,

37
00:02:35,978 --> 00:02:40,553
I'll target heart icon, add a transition.

38
00:02:40,553 --> 00:02:45,489
And I'll wanna transition the transform
property, and I'll set the transition

39
00:02:45,489 --> 00:02:50,657
duration to 0.2 seconds, and once gain,
the timing function will be ease-out.

40
00:02:50,657 --> 00:02:54,877
All right, so once I save my style
sheet and refresh the browser,

41
00:02:54,877 --> 00:02:58,660
when I hover over the heart icon,
we can see how it scales.

42
00:03:00,130 --> 00:03:01,500
Neat.

43
00:03:01,500 --> 00:03:06,750
So now no matter how small or large we
make these icons, the transitions and

44
00:03:06,750 --> 00:03:11,410
transforms will always look and
work the same at any size.

45
00:03:11,410 --> 00:03:17,020
So for example, if I go back to my style
sheet and if I remove the svg width

46
00:03:17,020 --> 00:03:22,570
of 32% and the float,
when we take a look at it again,

47
00:03:22,570 --> 00:03:26,620
we can see how the icons scale
up to the size of my viewport.

48
00:03:26,620 --> 00:03:29,510
But everything still looks and
works great.

49
00:03:29,510 --> 00:03:33,150
All my transitions in transform
work exactly the same way.

50
00:03:36,040 --> 00:03:39,970
If you wanna see examples of some of
the neat effects we can create with

51
00:03:39,970 --> 00:03:44,220
SVG transitions and transforms, in
the teachers notes, I've posted a link to

52
00:03:44,220 --> 00:03:49,350
a code pen containing these awesome
animated weather icons by Noah Blon.