Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
The default transform origin of an HTML element is its center, so the transform functions we apply move elements according to this center point. We can modify the spot at which the element is scaled or rotated using the 'transform-origin' property.
Resources
Video review
- The default transform origin of an HTML element is its center, or
50% 50%. -
transform-originis a separate CSS property; you add it to the element you're transforming. -
transform-originaccepts values as length units, percentages, or position keywords. - In
transform-origin, the first value sets the horizontal origin, and the second value sets the vertical origin. - The value
0 0moves the origin to the element's top-left corner. - The value
100% 100%positions the origin at the furthest point on the X axis and the furthest point on the Y axis––orbottom right.
Related videos
The default transform origin of
an HTML element is it's center.
0:00
So, the transform functions we apply move
elements according to the center point.
0:04
For example, when you apply a rotation to
an image, the image rotates around it's
0:10
center by default and if you scale the
image, it scales evenly from it's center.
0:16
But, we can modify the spot at
which the element is scaled or
0:23
rotated by setting what's called
the default origin of the transformation.
0:27
You do this with the transform
origin property.
0:32
To help you see how this works,
I've wrapped the top three images
0:36
in a span and gave the span
a light gray background color.
0:41
That way, we can compare
the transformed images with their
0:46
original position on the page as we
modify their transformed origin.
0:49
You can launch the latest workspace
on this page to see these changes,
0:53
or you can keep following along
with your previous workspace.
0:57
Transform origin is
a separate CSS property, so
1:02
you add it to the element
we're transforming.
1:05
So, back in my style sheet, I'm gonna
change the transform origin of my images
1:09
by adding it right here in the image rule,
so I'll say transform-origin.
1:14
Now, the default value for
transform origin is 50%, 50%,
1:21
which sets the origin at 50%
horizontally and at 50% vertically.
1:26
So, as you just learned, this will always
be the exact center of the element.
1:33
So, let's say I don't wanna scale
my images from their center point.
1:38
Well, I can easily change
the origin using a length unit,
1:41
percentage or a position keyword.
1:45
So back in my image rule, I'll change
the transform origin value to 0, 0.
1:48
The value 0, 0 moves the origin
to the elements top left corner.
1:54
So, now the images no longer
scale from their center.
2:00
As you can see, they sort of shift
a little to the right as they're scaling.
2:05
And the change in origin is more
apparent when applying a rotation.
2:13
So for instance,
I'll go back to my image hover rule.
2:18
And it changed the transform
from scale to rotate, and
2:23
let's set the value to 45 degrees.
2:28
When I refresh the browser and hover
over an image, the light grey area shows
2:32
the original position of the images, so
instead of rotating around their center,
2:38
the images used their top left
corner as a rotation point.
2:43
So, now the transforms behave differently.
2:48
The images sort of swing
from the top left origin.
2:51
And we can really see
the change in origin if we
2:58
set the rotation to a larger
value like 360 degrees.
3:01
The transform origin value 0,
3:11
0 is the same as the value top left.
3:15
And if we go back and
set the value to bottom right.
3:25
This will shift the transform origin
to the bottom right corner of an image.
3:31
So, now the images swings around
their bottom right corner,
3:38
and percentages the value bottom right
is equivalent to the value 100%.
3:43
100% because it positions the origin
at the farthest point on the x axis and
3:49
the furthest point on the y axis.
3:54
We can also define more specific
transform origins using pixel values.
4:01
In another course,
you'll learn how pixel values and
4:05
transform origin come in
handy when transforming SVGs.
4:08
I've linked to that course in
the teacher notes for this video.
4:12
Now you'll probably use the default
transform origin most of the time, but
4:15
I'll show you how you can use transform
origin to enhance the image gallery and
4:20
make the scaling a little
more interesting, like this.
4:24
But first,
4:31
I'm gonna remove the transform-origin
declaration from my image rule.
4:32
And I'm gonna set the rotate
value back to negative 5 degrees.
4:38
So, now in the second row of images,
the image and
4:48
photo-overlay are nested inside
a div with the class photo.
4:52
And as you can see in main.ess,
the phot.div overflow is set to hidden.
4:58
So, this hides any content
that extends beyond the div.
5:06
So, I wanna scale the size
of these three images
5:11
when a user hovers over that photo div.
5:14
So, back inside interactions.css,
I'll scroll down to the row 2 comment.
5:20
And I'll create a new rule that targets
an image inside photo on hover.
5:28
[SOUND] I'll add
the transform property and
5:34
I want to scale the images
1.2 times the original size.
5:39
So, I will use the scale function and
set the value to 1.2.
5:46
When we refresh the browser and
hover over one of these images,
5:53
we can see that the overflow on
that photo div creates this awesome
5:58
zooming in effect behind the overlay
because the photo div hides
6:03
the parts of the image that
scale beyond its boundaries.
6:08
So now,
I can take this effect a little further by
6:14
changing the transform
origin of the image.
6:17
This will shift the scaling
perspective within that photo div.
6:21
So, back in my style sheet, I'm going to
target the images inside the photo div.
6:24
I'll add the transform origin property and
set the origin to 0, 0.
6:34
Remember this is the top
left corner of the image.
6:41
Back in the browser when
we hover over an image,
6:45
notice how the change in origin adds
a nice touch to the scaling movement.
6:48
The images appear to be slightly zooming
in towards us from the top left sides.
6:54
Nice.
6:59
You need to sign up for Treehouse in order to download course files.
Sign up