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
element to be two times of its original width, and three times of its original height:
Example
div {
transform: scale(2, 3);
}
The following example decreases the
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.
The following example increases the
element to be two times of its original width:
Example
div {
transform: scaleX(2);
}
The following example decreases the
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.
The following example increases the
element to be three times of its original height:
Example
div {
transform: scaleY(3);
}
The following example decreases the
element to be half of its original height:
Example
div {
transform: scaleY(0.5);
}
Want to go beyond the notes?
Join CodingNow 2.0's CSS course — live mentorship, real projects, and 100% placement support.
Enroll Now — Free Demo AvailableScale – FAQs
Quick answers about learning Scale in CSS.
This free note from CodingNow 2.0 explains Scale in CSS — concept, syntax and worked code examples you can copy, run and revise before interviews.
Yes. Every CSS topic on CodingNow 2.0, including Scale, is 100% free with no signup required.
With focused practice, most students grasp Scale in 1–3 days from these notes; pairing it with CodingNow 2.0's mentor-led course takes you to job-ready depth faster.
Use the code examples in this note, then ask doubts for free on the CodingNow 2.0 Community (/community) — expert instructors answer within 24 hours.