Scaling Elements

scale() allows us to increase or decrease the element size. Also, we can resize an element only vertically using the scaleY() property or only horizontally using the scaleX() property.

css
9
1
2
3
transform: scale(X-value, Y-value);
transform: scaleX(value);
transform: scaleY(value);

The values for the scale functions must be unitless. By default, the value is 1, which means make no changes.

• scale() function can get two values. The first (X-value) is the number representing the horizontal resize. The second (Y-value) is the number representing the vertical resize. If we set one value, the browser applies the same for horizontal and vertical scales;

• scaleX and scaleY functions get one value and change an element horizontally and vertically, respectively.

Let's have some practice and add scaling for the following elements: