The CSS scale() Function
The scale() function increases or decreases the size of an element (according to the parameters given for the width and height).
The following example increases the <div> element to be two times of its original width, and three times of its original height:
Example
div {
transform: scale(2, 3);
}Live preview
The following example decreases the <div> element to be half of its original width and height:
Example
div {
transform: scale(0.5, 0.5);
}Live preview
The CSS scaleX() Function
The scaleX() function increases or decreases the width of an element.
The following example increases the <div> element to be two times of its original width:
Example
div {
transform: scaleX(2);
}Live preview
The following example decreases the <div> element to be half of its original width:
Example
div {
transform: scaleX(0.5);
}Live preview
The CSS scaleY() Function
The scaleY() function increases or decreases the height of an element.
The following example increases the <div> element to be three times of its original height:
Example
div {
transform: scaleY(3);
}Live preview
The following example decreases the <div> element to be half of its original height:
Example
div {
transform: scaleY(0.5);
}Live preview