1
00:00:00,220 --> 00:00:02,940
Once you've launched the latest
workspace for this video, and

2
00:00:02,940 --> 00:00:06,260
open a stylesheet, you'll notice
that I've removed the fill color and

3
00:00:06,260 --> 00:00:09,670
stroke transitions we created
in the previous lesson.

4
00:00:09,670 --> 00:00:13,510
So, now, we're going to focus on
the different ways we can manipulate SVG

5
00:00:13,510 --> 00:00:16,270
elements using CSS transforms.

6
00:00:16,270 --> 00:00:18,710
Transforming SVG elements with CSS,

7
00:00:18,710 --> 00:00:23,160
is pretty much the same as
transforming HTML elements with CSS.

8
00:00:23,160 --> 00:00:29,330
We can rotate, scale, skew, and translate
SVGs using the transform property.

9
00:00:29,330 --> 00:00:33,280
So, now I wanna create different
transforms that rotate and

10
00:00:33,280 --> 00:00:37,350
scale these icons when
you hover over them.

11
00:00:37,350 --> 00:00:40,750
So, first In my HTML file,

12
00:00:40,750 --> 00:00:45,670
I'm going to group the circle and
path elements nested inside each SVG.

13
00:00:45,670 --> 00:00:49,590
And I'll do that using the g element.

14
00:00:49,590 --> 00:00:51,860
So, in my gear icon,

15
00:00:51,860 --> 00:00:57,410
right above the first circle element,
I'm going to add a g element.

16
00:00:57,410 --> 00:01:03,060
Now the g element is a container
used to group SVG shapes together.

17
00:01:03,060 --> 00:01:07,510
So, I'm going to give this
g element the class gear.

18
00:01:09,200 --> 00:01:14,730
Since SVG is written in XML,
all elements must be properly closed.

19
00:01:14,730 --> 00:01:20,991
So, right above the closing SVG tag
I'll go ahead and add the closing g tag.

20
00:01:24,443 --> 00:01:27,109
Once SVG elements are grouped like this,

21
00:01:27,109 --> 00:01:30,980
you can transform the entire
group as a single object.

22
00:01:30,980 --> 00:01:33,610
And you'll learn more about
that in the next stage.

23
00:01:33,610 --> 00:01:38,270
Right now, I'm using the g element so
that when we hover over it,

24
00:01:38,270 --> 00:01:43,340
it will apply a transform and
transition to the nested icons.

25
00:01:43,340 --> 00:01:45,200
So next I'll scroll down and

26
00:01:45,200 --> 00:01:50,230
group the circle and path elements
nested inside the hammer icon.

27
00:01:50,230 --> 00:01:55,720
So once again, right above the circle
element, I'll add a g element.

28
00:01:55,720 --> 00:01:58,010
And I'll give this one a class of hammer.

29
00:02:00,920 --> 00:02:05,089
Then right above its closing SVG tag,
I'll add the closing g tag.

30
00:02:08,493 --> 00:02:13,530
Finally, I'll group the circle and
path elements nested inside the heart SVG.

31
00:02:15,910 --> 00:02:23,231
So I'll add a g tag above the circle,
and I'll give this one a class of heart.

32
00:02:23,231 --> 00:02:26,646
And I'll add its closing tag
right above the closing SVG tag.

33
00:02:29,774 --> 00:02:32,790
All right, so now I'm ready
to write my transform styles.

34
00:02:32,790 --> 00:02:39,054
I'll save my index.html file, and back in
my stylesheet, under the gear comment,

35
00:02:39,054 --> 00:02:44,013
I'm going to create a new rule by
writing a descendent selector that

36
00:02:44,013 --> 00:02:48,890
targets the gear icon element,
once the gear element is hovered.

37
00:02:48,890 --> 00:02:55,289
So first I'm going to target gear on hover
and then I'll target the class gear-icon.

38
00:02:58,315 --> 00:03:02,368
Inside this rule,
I'll add a transform property and

39
00:03:02,368 --> 00:03:06,530
I want to rotate the icon
45 degrees clockwise.

40
00:03:06,530 --> 00:03:13,020
So, I'm going to define a rotate function,
and set the rotation to 45 degrees.

41
00:03:13,020 --> 00:03:17,242
Next, I'm going to use the scale
function to scale the element

42
00:03:17,242 --> 00:03:20,070
1.3 times its original size.

43
00:03:20,070 --> 00:03:23,860
So, what's a rotation, and a scale without
a smooth transition effect, right?

44
00:03:23,860 --> 00:03:28,900
So, to transition these transform
functions on both the hover on, and

45
00:03:28,900 --> 00:03:34,250
hover off states, I'm going to apply
a transition to the gear icon element.

46
00:03:34,250 --> 00:03:39,850
So I'll target gear icon,
then I'll add a transition

47
00:03:39,850 --> 00:03:44,800
property, and
I wanna target the transform property.

48
00:03:44,800 --> 00:03:49,792
So I'll define that first, then I'll set
the transition duration to 0.4 seconds,

49
00:03:49,792 --> 00:03:51,940
and the timing function to ease out.

50
00:03:53,030 --> 00:03:57,880
So, SVG transforms with CSS generally
behave the same way they do with

51
00:03:57,880 --> 00:04:03,400
HTML elements, except for one noticeable
exception, the transform origin.

52
00:04:03,400 --> 00:04:05,560
So if I save my stylesheet and

53
00:04:05,560 --> 00:04:10,560
take a look at this in the browser,
notice how the rotation is off center.

54
00:04:10,560 --> 00:04:14,570
And it's not scaling evenly on the x and
y axis.

55
00:04:14,570 --> 00:04:18,120
So let's take a look at
why this happens in SVG.

56
00:04:18,120 --> 00:04:22,320
SVG handles transform origins
differently than HTML elements.

57
00:04:22,320 --> 00:04:24,990
This makes transforming
them a bit trickier.

58
00:04:24,990 --> 00:04:30,612
You see, the default transform
origin of an HTML element is 50%,

59
00:04:30,612 --> 00:04:33,480
50% which is the element's center.

60
00:04:33,480 --> 00:04:36,690
So everything transforms
around this point.

61
00:04:36,690 --> 00:04:41,150
But, an SVG's default
origin value is the 0,

62
00:04:41,150 --> 00:04:45,560
0 point, or
the top left corner of the SVG canvas.

63
00:04:45,560 --> 00:04:49,210
Now the canvas is the area
where the SVG is drawn.

64
00:04:49,210 --> 00:04:54,260
So the top left transform origin
causes elements to transform

65
00:04:54,260 --> 00:04:57,200
around that point instead of the center.

66
00:04:57,200 --> 00:05:01,990
So, for example, when we're
rotating our icon by 45 degrees,

67
00:05:01,990 --> 00:05:05,160
instead of rotating
around its center origin,

68
00:05:05,160 --> 00:05:10,510
it's swinging around the top
left corner of the SVG canvas.

69
00:05:10,510 --> 00:05:15,550
And it's also scaling from that
top left corner of the svg canvas.

70
00:05:15,550 --> 00:05:20,210
So if you want to transform an SVG element
from its center, you need to explicitly

71
00:05:20,210 --> 00:05:25,510
set the element's transform origin to the
center with the transform origin property.

72
00:05:25,510 --> 00:05:30,132
So back in my stylesheet,
in the gear-icon rule,

73
00:05:30,132 --> 00:05:34,646
I'm going to add
a transform-origin property,

74
00:05:34,646 --> 00:05:37,869
and set the value to 50% 50%,

75
00:05:37,869 --> 00:05:42,830
which moves the origin to
the center of the element.

76
00:05:42,830 --> 00:05:46,480
So when we set a transform
value in percentages,

77
00:05:46,480 --> 00:05:50,800
the value is set relative to
the shape element's bounding box.

78
00:05:50,800 --> 00:05:56,280
Now the shape's bounding box is similar
to the border area of an HTML element.

79
00:05:56,280 --> 00:06:00,055
So that's the area highlighted
here by the Chrome dev tools.

80
00:06:00,055 --> 00:06:05,005
However, if we set a transform
origin value in pixels,

81
00:06:05,005 --> 00:06:10,145
the origin will be set relative to
the SVG canvas's top left corner.

82
00:06:10,145 --> 00:06:12,825
And you'll learn more about that,
in the next video.

83
00:06:12,825 --> 00:06:17,215
So now that I've set the gear icon's
transform origin value to 50% 50%, or

84
00:06:17,215 --> 00:06:20,530
the center point.

85
00:06:20,530 --> 00:06:23,810
When we take a look at it in
the preview and hover over the circle,

86
00:06:23,810 --> 00:06:28,580
you can see how the icon rotates and
evenly scales from its center point.

87
00:06:28,580 --> 00:06:29,080
Looks good.