scale()

The scale() function is used to scale an element up or down, making it appear bigger or smaller.

It takes one or two unitless <number>s as a value, sx and sy, where sx will scale the element in the direction of the x-axis, and sy will scale it in the direction of the y-axis direction. If only one value (sx) is provided, the second one (sy) is assumed to be equal to the first one.

If the value provided is greater than one, the element is scaled up—it will look bigger in the corresponding direction. If the value is equal to one, the element stays unchanged (in the corresponding direction). If the value is between zero and one exclusively, the element is scaled down. If the value is zero, the element disappears. Negative values are allowed, but they don’t scale the element. In fact, they cause the transformed element to be flipped in either direction!

Examples:

/* element is unchanged */
transform: scale(1, 1);

/* element looks twice as its original size */
transform: scale(2, 2); 

/* element is scaled only vertically by double its vertical size, 
and its horizontal size is unchanged. Similar effect to that of 
scaleY(2) (see next value) */
transform: scale(1, 2); 

/* element is scaled only horizontally by double its horizontal 
size, and its vertical size is unchanged. Similar effect to that 
of scaleX(2) (see next value) */
transform: scale(2, 1);

/* scales element to 3 times its size */
transform: scale(3);

/* element is scaled to look half its size */
transform: scale(0.5); 

/* element is scaled out so that it disappears */
transform: scale(0);

/* will flip the element in both directions */
transform: scale(-1); 
                

The following image shows the result of applying different scale() transformations to an image. The first one on the left is the image with no transformation. The second one is the result of applying transform: scale(2);, the third one is the result of applying transform: scale(0.5), and the fourth one is the result of applying transform: scale(0.5, 1.5);. Notice how the images overlap each other because the transformation on each one does not affect the flow of content around it.

The following image is the result of applying scale() (and its two variations) with a negative value on an image:

The official syntax looks as follows:

transform: scale(<number> [, <number>]?); /* the question mark indicates the second value is optional */
                

For a better understanding of the transform functions, please refer to the transform entry.