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
One of the most common CSS transformations is scaling. You can increase or decrease the size of elements using scale functions like scaleX(), scaleY(), and scale().
Resources
Video review
- To apply a basic scale transformation, define a number that instructs the browser how large to scale an element.
- The default value for
scale()is:scale(1). - To make an element twice as large, write
2as the value:scale(2). - One
scale()value evenly scales an element both vertically and horizontally. -
scale()accepts a second number value inside the parenthesis. - Two values let you individually scale the horizontal and vertical dimensions; write the scaling value for X first, followed by the scaling value for Y.
- When scaling an image, make sure that the original dimensions of the image is larger than the size at which you're scaling the image.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
One of the most commonly used
CSS transformations is scale.
0:00
You can increase or decrease the size
of elements on the x or y axis
0:04
using scale functions like scale X and
scale Y.
0:09
But most of the time, you're going
to use the scale shorthand function
0:15
to evenly scale elements horizontally and
vertically.
0:20
Like in this example.
0:24
So notice how the div scales twice
as large when we hover over it.
0:26
So first I want to scale
the size of my images on hover.
0:33
I'll go back to interactions .css and
scroll down to the image
0:37
hover rule here and I'll change the
transform function to the scale function.
0:43
Now applying a basic skill transformation
is pretty straight forward.
0:48
Inside the parenthesis you write a number
that instructs the browser how large
0:53
the scale and element So
the default value for scale is 1.
0:58
Which is equivalent to no scaling.
1:04
Now if I want to make the images twice as
large I can write 2 as the scale value.
1:07
So now the images zoom out from the center
without affecting the rest of the content.
1:15
They scale evenly both vertically and
horizontally.
1:21
So their width and
height are now twice as big.
1:24
Now a value like 1.5 will make
the images 1.5 times larger on hover.
1:28
The scale function also accepts a second
number value inside the parentheses.
1:38
Now, two values let you individually scale
the horizontal and vertical dimensions.
1:44
You write the scaling value for x first,
1:50
followed by a comma, and
then the scaling value for y.
1:54
So let's make the y value 2.
1:59
So once we refresh the browser and
hover over an image, the first value of
2:02
1.5 scales the width of the images, while
the second value of 2 scales the height.
2:08
So now unhovered, the images
are 1.5 whiter and twice as tall.
2:14
Now when you apply a scale to an image
you should make sure that the original
2:21
dimensions of the images
is written in your HTML
2:26
are larger than the size at which
you're going to scale them.
2:29
That way you can safely scale your
images while maintaining their quality.
2:34
Now the best and
most visually appealing solution for
2:38
my image gallery Is one
small scale value like 1.1.
2:42
Much better, so as you've seen,
the spot at which an element scales and
2:53
rotates is the exact same center
of the element by default.
2:58
In the next video you'll learn how
to change the spot to scale or
3:03
rotate elements from other areas, like the
top-left corner or bottom-right corners.
3:07
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up