0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>Another feature of CSS transforms is that you can use them to scale blocks. You can use the scale function to increase or decrease the size of elements.</p>
1
<p>Another feature of CSS transforms is that you can use them to scale blocks. You can use the scale function to increase or decrease the size of elements.</p>
2
<p>The value of this function can be any number. In this case, the value 1 is considered to be the reference point, where the block has its original dimensions. Consider the following examples:</p>
2
<p>The value of this function can be any number. In this case, the value 1 is considered to be the reference point, where the block has its original dimensions. Consider the following examples:</p>
3
<ul><li>scale(0.5) halves the size of the object.</li>
3
<ul><li>scale(0.5) halves the size of the object.</li>
4
<li>scale(2) doubles the size of the object.</li>
4
<li>scale(2) doubles the size of the object.</li>
5
<li>scale(0) completely collapses the object so that it is no longer visible.</li>
5
<li>scale(0) completely collapses the object so that it is no longer visible.</li>
6
<li>scale(1) leaves the object unchanged.</li>
6
<li>scale(1) leaves the object unchanged.</li>
7
</ul><p>Generally speaking, the scale function, just like translate, takes two arguments:</p>
7
</ul><p>Generally speaking, the scale function, just like translate, takes two arguments:</p>
8
scale(scale-by-X [, scale-by-Y])<p>If the optional argument scale-by-Y is not set, then it is considered to take the same value as scale-by-X:</p>
8
scale(scale-by-X [, scale-by-Y])<p>If the optional argument scale-by-Y is not set, then it is considered to take the same value as scale-by-X:</p>
9
transform: scale(2) is the same as transform: scale(2, 2)<p>In addition, when we need to scale the object only along one axis independently of the other, we can use the functions scaleX(scale-by-X) and scaleY(scale-by-Y).</p>
9
transform: scale(2) is the same as transform: scale(2, 2)<p>In addition, when we need to scale the object only along one axis independently of the other, we can use the functions scaleX(scale-by-X) and scaleY(scale-by-Y).</p>