Scale
Learn to scale elements with scale().
The scale() function
scale() grows or shrinks an element. scale(2) doubles it; scale(0.5) halves it. A value of 1 leaves it unchanged.
The scaling centre defaults to the middle. So the element expands symmetrically in every direction. The size of neighbours stays the same.
scaleX and scaleY
To scale a single axis, use scaleX() and scaleY(). scaleX(2) doubles the width; the height stays the same.
To give both values at once, write scale(2, 0.5): twice as wide, half as tall. This is the short way to change both axes in one declaration.
Flip with negative scale
A negative scale flips the element. scaleX(-1) mirrors it horizontally; the content reads right to left.
This trick is practical for an icon or an arrow. A flip on hover makes the interaction obvious at once. The same trick flips a card vertically too.
Exercise Button hover scale
Add two style blocks. First a .button selector with transform: scale(1). Second a .button:hover selector with transform: scale(1.1). The button should grow by ten percent on hover.
Show example solution
/* add a transform for the button */
.button {
transform: scale(1);
}
.button:hover {
transform: scale(1.1);
}Test yourself
-
What does scale(1.5) do?
.grow { transform: scale(1.5); }- Shifts the element 1.5 pixels right
- Shrinks the element by 50%
- Rotates the element 1.5 degrees
- Enlarges the element to 1.5 times
Show answer
Enlarges the element to 1.5 times — Correct. scale is a ratio; 1.5 grows the element by 50 percent, that is, 1.5 times its size.
-
Write the scale function
.grow { transform: ____(1.5); }Show answer
.grow { transform: scale(1.5); } -
Match each function to its effect
- scale(2)
- Double size
- scale(0.5)
- Halve size
- scaleX(-1)
- Flip horizontally
- scaleY(2)
- Double height