bugl
bugl
HomeLearnPatternsSearch
HomeLearnPatternsSearch

Loading lesson path

Learn/CSS/Advanced Styling
CSS•Advanced Styling

CSS 2D Transform Scale

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);
}

Formula

The following example decreases the < div > element to be half of its original width and height:
Example div {
transform: scale(0.5, 0.5);
}

The CSS scaleX() Function

The scaleX() function increases or decreases the width of an element.

Formula

The following example increases the < div > element to be two times of its original width:
Example div {
transform: scaleX(2);
}

Formula

The following example decreases the < div > element to be half of its original width:
Example div {
transform: scaleX(0.5);
}

The CSS scaleY() Function

The scaleY() function increases or decreases the height of an element.

Formula

The following example increases the < div > element to be three times of its original height:
Example div {
transform: scaleY(3);
}

Formula

The following example decreases the < div > element to be half of its original height:
Example div {
transform: scaleY(0.5);
}

Previous

CSS 2D Transforms

Next

CSS 2D Transform Skew / Matrix