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.

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: