Once you've launched the latest workspace for this video, and

open a stylesheet, you'll notice that I've removed the fill color and

stroke transitions we created in the previous lesson.

So, now, we're going to focus on the different ways we can manipulate SVG

elements using CSS transforms.

Transforming SVG elements with CSS,

is pretty much the same as transforming HTML elements with CSS.

We can rotate, scale, skew, and translate SVGs using the transform property.

So, now I wanna create different transforms that rotate and

scale these icons when you hover over them.

So, first In my HTML file,

I'm going to group the circle and path elements nested inside each SVG.

And I'll do that using the g element.

So, in my gear icon,

right above the first circle element, I'm going to add a g element.

Now the g element is a container used to group SVG shapes together.

So, I'm going to give this g element the class gear.

Since SVG is written in XML, all elements must be properly closed.

So, right above the closing SVG tag I'll go ahead and add the closing g tag.

Once SVG elements are grouped like this,

you can transform the entire group as a single object.

And you'll learn more about that in the next stage.

Right now, I'm using the g element so that when we hover over it,

it will apply a transform and transition to the nested icons.

So next I'll scroll down and

group the circle and path elements nested inside the hammer icon.

So once again, right above the circle element, I'll add a g element.

And I'll give this one a class of hammer.

Then right above its closing SVG tag, I'll add the closing g tag.

Finally, I'll group the circle and path elements nested inside the heart SVG.

So I'll add a g tag above the circle, and I'll give this one a class of heart.

And I'll add its closing tag right above the closing SVG tag.

All right, so now I'm ready to write my transform styles.

I'll save my index.html file, and back in my stylesheet, under the gear comment,

I'm going to create a new rule by writing a descendent selector that

targets the gear icon element, once the gear element is hovered.

So first I'm going to target gear on hover and then I'll target the class gear-icon.

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

I want to rotate the icon 45 degrees clockwise.

So, I'm going to define a rotate function, and set the rotation to 45 degrees.

Next, I'm going to use the scale function to scale the element

1.3 times its original size.

So, what's a rotation, and a scale without a smooth transition effect, right?

So, to transition these transform functions on both the hover on, and

hover off states, I'm going to apply a transition to the gear icon element.

So I'll target gear icon, then I'll add a transition

property, and I wanna target the transform property.

So I'll define that first, then I'll set the transition duration to 0.4 seconds,

and the timing function to ease out.

So, SVG transforms with CSS generally behave the same way they do with

HTML elements, except for one noticeable exception, the transform origin.

So if I save my stylesheet and

take a look at this in the browser, notice how the rotation is off center.

And it's not scaling evenly on the x and y axis.

So let's take a look at why this happens in SVG.

SVG handles transform origins differently than HTML elements.

This makes transforming them a bit trickier.

You see, the default transform origin of an HTML element is 50%,

50% which is the element's center.

So everything transforms around this point.

But, an SVG's default origin value is the 0,

0 point, or the top left corner of the SVG canvas.

Now the canvas is the area where the SVG is drawn.

So the top left transform origin causes elements to transform

around that point instead of the center.

So, for example, when we're rotating our icon by 45 degrees,

instead of rotating around its center origin,

it's swinging around the top left corner of the SVG canvas.

And it's also scaling from that top left corner of the svg canvas.

So if you want to transform an SVG element from its center, you need to explicitly

set the element's transform origin to the center with the transform origin property.

So back in my stylesheet, in the gear-icon rule,

I'm going to add a transform-origin property,

and set the value to 50% 50%,

which moves the origin to the center of the element.

So when we set a transform value in percentages,

the value is set relative to the shape element's bounding box.

Now the shape's bounding box is similar to the border area of an HTML element.

So that's the area highlighted here by the Chrome dev tools.

However, if we set a transform origin value in pixels,

the origin will be set relative to the SVG canvas's top left corner.

And you'll learn more about that, in the next video.

So now that I've set the gear icon's transform origin value to 50% 50%, or

the center point.

When we take a look at it in the preview and hover over the circle,

you can see how the icon rotates and evenly scales from its center point.

Looks good.