Increasing and decreasing the size

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.

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:

• scale(0.5) halves the size of the object.
• scale(2) doubles the size of the object.
• scale(0) completely collapses the object so that it is no longer visible.
• scale(1) leaves the object unchanged.

Generally speaking, the scale function, just like translate, takes two arguments:

scale(scale-by-X [, scale-by-Y])

If the optional argument scale-by-Y is not set, then it is considered to take the same value as scale-by-X:

transform: scale(2) is the same as transform: scale(2, 2)

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).