Definition
The scale CSS transformation function is used to scale an element by a specified factor along both the horizontal and vertical axes. It allows you to resize an element, making it larger or smaller while preserving its aspect ratio.
The scale function accepts one or two parameters, representing the scaling factors along the horizontal and vertical axes, respectively. A single value scales the element uniformly along both axes, while two values allow independent scaling along the horizontal and vertical axes.
Here’s an example:
.scale-element {
transform: scale(1.5);
}
In this example, the .scale-element class applies a scaling transformation of 1.5 to the element. It will increase the size of the element by 1.5 times along both the horizontal and vertical axes, making it 1.5 times larger.
You can also use two parameters to specify different scaling factors for the horizontal and vertical axes:
.scale-element {
transform: scale(2, 0.5);
}
In this example, the .scale-element class applies a scaling transformation of 2 along the horizontal axis and 0.5 along the vertical axis. This will stretch the element horizontally by a factor of 2 and compress it vertically by a factor of 0.5.
The scale transformation is commonly used in combination with other CSS transformations, such as rotate and translate, to create complex and dynamic visual effects. It can be applied to any HTML element and is particularly useful for resizing and transforming elements in responsive designs or animations.