The default transform origin of an HTML element is it's center.

So, the transform functions we apply move elements according to the center point.

For example, when you apply a rotation to an image, the image rotates around it's

center by default and if you scale the image, it scales evenly from it's center.

But, we can modify the spot at which the element is scaled or

rotated by setting what's called the default origin of the transformation.

You do this with the transform origin property.

To help you see how this works, I've wrapped the top three images

in a span and gave the span a light gray background color.

That way, we can compare the transformed images with their

original position on the page as we modify their transformed origin.

You can launch the latest workspace on this page to see these changes,

or you can keep following along with your previous workspace.

Transform origin is a separate CSS property, so

you add it to the element we're transforming.

So, back in my style sheet, I'm gonna change the transform origin of my images

by adding it right here in the image rule, so I'll say transform-origin.

Now, the default value for transform origin is 50%, 50%,

which sets the origin at 50% horizontally and at 50% vertically.

So, as you just learned, this will always be the exact center of the element.

So, let's say I don't wanna scale my images from their center point.

Well, I can easily change the origin using a length unit,

percentage or a position keyword.

So back in my image rule, I'll change the transform origin value to 0, 0.

The value 0, 0 moves the origin to the elements top left corner.

So, now the images no longer scale from their center.

As you can see, they sort of shift a little to the right as they're scaling.

And the change in origin is more apparent when applying a rotation.

So for instance, I'll go back to my image hover rule.

And it changed the transform from scale to rotate, and

let's set the value to 45 degrees.

When I refresh the browser and hover over an image, the light grey area shows

the original position of the images, so instead of rotating around their center,

the images used their top left corner as a rotation point.

So, now the transforms behave differently.

The images sort of swing from the top left origin.

And we can really see the change in origin if we

set the rotation to a larger value like 360 degrees.

The transform origin value 0,

0 is the same as the value top left.

And if we go back and set the value to bottom right.

This will shift the transform origin to the bottom right corner of an image.

So, now the images swings around their bottom right corner,

and percentages the value bottom right is equivalent to the value 100%.

100% because it positions the origin at the farthest point on the x axis and

the furthest point on the y axis.

We can also define more specific transform origins using pixel values.

In another course, you'll learn how pixel values and

transform origin come in handy when transforming SVGs.

I've linked to that course in the teacher notes for this video.

Now you'll probably use the default transform origin most of the time, but

I'll show you how you can use transform origin to enhance the image gallery and

make the scaling a little more interesting, like this.

But first,

I'm gonna remove the transform-origin declaration from my image rule.

And I'm gonna set the rotate value back to negative 5 degrees.

So, now in the second row of images, the image and

photo-overlay are nested inside a div with the class photo.

And as you can see in main.ess, the phot.div overflow is set to hidden.

So, this hides any content that extends beyond the div.

So, I wanna scale the size of these three images

when a user hovers over that photo div.

So, back inside interactions.css, I'll scroll down to the row 2 comment.

And I'll create a new rule that targets an image inside photo on hover.

[SOUND] I'll add the transform property and

I want to scale the images 1.2 times the original size.

So, I will use the scale function and set the value to 1.2.

When we refresh the browser and hover over one of these images,

we can see that the overflow on that photo div creates this awesome

zooming in effect behind the overlay because the photo div hides

the parts of the image that scale beyond its boundaries.

So now, I can take this effect a little further by

changing the transform origin of the image.

This will shift the scaling perspective within that photo div.

So, back in my style sheet, I'm going to target the images inside the photo div.

I'll add the transform origin property and set the origin to 0, 0.

Remember this is the top left corner of the image.

Back in the browser when we hover over an image,

notice how the change in origin adds a nice touch to the scaling movement.

The images appear to be slightly zooming in towards us from the top left sides.

Nice.