2.2: 2D CSS Transforms - scale()

Learning Objectives

• Gain understanding of scale(), scaleX(), and scaleY().

---

2D CSS Transforms - scale()

Now, let's look at our next 2D Transform: scale().

Definition: scale()

When you scale an element, you increase or decrease the size of an element (according to the parameters given for the width and height).¹

Figure 1: Scaling an element

The way you set up this CSS property value is like this:

Concept \(\PageIndex{1}\)

selector {

transform: scale(width, height);

}

You set the scale value by inserting a whole number, decimal value, or percentage. The value in the example below will make the object 25% of its regular size.

Concept \(\PageIndex{2}\)

selector {

transform: scale(0.25, 0.25);

}

The values in this example will increase the size of the object by 5 times for width and 6 times for the height:

Example \(\PageIndex{1}\)

selector {

transform: scale(5, 6);

}

Let's give this a go in CodePen:

Exercise \(\PageIndex{1}\)

1. Open this page in Chrome if you have not done so already.
2. Toggle back and forth between the CSS and HTML buttons. Note the code in each of those windows.
3. In the CSS panel, create a transform property on the scale ID. Set the value of the scale property to .75 on the width and .25 on the height.
4. Notice what happened to the rocket.
5. Play around with two or three more values that you make up that are whole numbers. (I'd advise keeping these numbers on the smaller side because you may crash the browser if the image is too large.)
6. Need help? Click on the "Answer" link below the CodePen to expand more information.

See the Pen 2D CSS Transform: scale(); by Rosemary Williams Barker (@rosemary-williams-barker) on CodePen.

Answer

#scale {

transform: scale(.75, .25);

}

Did you notice how squashed the rocket looked because of the height being set at a different size than the width? This mismatch of values altered the aspect ratio of the rocket.

Definition: Aspect Ratio

"The aspect ratio is the proportional relationship between an images with and height. Essentially, it describes an image's shape."²

The trick with using scale() with two different values is to pick the graphic you use it upon very carefully. For example, a plain box would work very well whereas our rocket did not work well at all. Our eyes expect the rocket to be taller than it is wide, so the squashed version doesn't feel natural to us at all.

However, we have seen rectangles in all kinds of different shapes and orientations both vertical and horizontal throughout our lives. Our eyes don't view the squashing of the rectangle as anything out of the ordinary due to this.

The trick with using scale() with two different values is to pick the graphic you use it upon very carefully.

Figure 2: Changing the aspect ratio with scale()

So, how do you change the scale of the rocket and keep the aspect ratio intact? Easy! You just specify one number rather than two.

Example \(\PageIndex{4}\)

selector {

transform: scale(5);

}

Now, give it a whirl in our CodePen again:

Exercise \(\PageIndex{2}\)

1. In the CSS panel, create a transform property on the scale ID. Set a singular value of the scale property to 5.
2. Notice what happened to the rocket.
3. Play around with two or three more values that you make up.
4. Need help? Click on the "Answer" link below the CodePen to expand more information.

See the Pen 2D CSS Transform: scale(); by Rosemary Williams Barker (@rosemary-williams-barker) on CodePen.

Answer

#scale {

transform: scale(5);

}

Now that we have looked at scale() in depth, let's explore two other types that are available to us: scaleX() and scaleY().

---

2D CSS Transforms - scaleX() and scaleY()

The scaleX() and scaleY() functions in CSS both change the size of an object on an HTML page. However, they both work with just one axis on the Cartesian Coordinate System. The scaleX() function works on the horizontal axis like you see below:

Figure 3: The X Axis (Horizontal)

Definition: scaleX()

The scaleX() CSS function defines a transformation that resizes an element along the x-axis (horizontally).³

The code for working with the X axis is very similar to what we saw above with scale(). The only difference is that you will have the letter 'X' just before the parentheses like what you see in the example below. The 'X' is marked in bold font to make it easier to see.

Example \(\PageIndex{5}\)

selector {

transform: scaleX(5);

}

And, you guessed it, the scaleY() function will work on the vertical axis like this:

Figure 4: The Y Axis (Vertical)

Definition: scaleY()

The scaleY() CSS function defines a transformation that resizes an element along the y-axis (vertically).⁴

Like the scale() function, the scaleX() and scaleY() functions also take whole numbers, decimal values, or percentages. Let's try this out in the exercise below.

Exercise \(\PageIndex{3}\)

Reminder - CodePen works best in the Chrome browser.

1. Analyze the code you see below. Notice that scaleX() is the item we are working with first.

2. Change the value inside of the parentheses from '1' to '1.5.' What happened to the rocket?

3. Change the value inside of the parentheses from '1.5' to '50%.' What happened to the rocket this time?

4. Now, let's switch functions from scaleX() to scaleY(). Upate the code now.

5. In the new scaleY() function, set the value inside of the parentheses to '150%.' What happened to the rocket?

6. Try a few more whole numbers, fractions, and percentages. What worked well and what didn't?

7. Need help? Click on the "Answer" link below the CodePen to expand more information.

See the Pen scaleX() and scaleY() by Rosemary Williams Barker (@rosemary-williams-barker) on CodePen.

Answers

Step 2: #scaleXY {
transform: scaleX(1.5);
}

Step 3: #scaleXY {
transform: scaleX(1.5);
}

Step 5: #scaleXY {
transform: scaleY(150%);
}

---

Footnotes

1. “The Scale() Method.” w3schools.Com, w3schools, https://www.w3schools.com/css/css3_2dtransforms.asp.
2. “Understanding Aspect Ratios.” Squarespace Help Center, https://support.squarespace.com/hc/en-us/articles/115008538927-Understanding-aspect-ratios.
3. “ScaleX() - CSS: Cascading Style Sheets: MDN.” CSS: Cascading Style Sheets | MDN, MDN Web Docs, https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleX.
4. “ScaleY() - CSS: Cascading Style Sheets: MDN.” CSS: Cascading Style Sheets | MDN, MDN Web Docs, https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleY.