Flash cards
Review the key moves
What is the main idea behind CSS 2D Transform Scale?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___: scale(2, 3);Put the learning moves in the order that makes the concept easiest to apply.
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