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!
/* 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.
The following is the support table for two-dimensional CSS transformations:
CSS3 2D Transforms
Method of transforming an element including rotating, scaling, etc. Includes support for `transform` as well as `transform-origin` properties.
W3C Candidate Recommendation
Supported from the following versions:
Mobile / Tablet
* denotes prefix required.
Stats from caniuse.com