CSS scale() Function
Example
Use scale() to scale several <div> elements:
#myDiv1 {
transform: scale(0.7);
}
#myDiv2 {
transform:
scale(110%);
}
#myDiv3 {
transform: scale(1.1, 0.5);
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The CSS scale() function is used to scale
an element (both width and height).
The scale() function defines values for how
much an element is scaled in x- and y-directions.
The scale() function is used within the
transform property.
| Version: | CSS Transforms Module Level 1 |
|---|
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | |||||
|---|---|---|---|---|---|
| scale() | 1 | 12 | 3.5 | 3.1 | 10.5 |
CSS Syntax
scale(sx, sy)
| Value | Description |
|---|---|
| sx | Required. A number or percent. Specifies the scaling vector for the width |
| sy | Optional. A number or percent. Specifies the scaling vector for the height. If omitted, the value is set equal to sx |
More Examples
Example
Use scale() to scale images:
#img1 {
transform: scale(0.7);
}
#img2 {
transform:
scale(110%);
}
#img3 {
transform: scale(1.1, 0.5);
}
Try it Yourself »
Related Pages
CSS reference: CSS transform property.
CSS reference: CSS scale property.
CSS reference: CSS scale3d() function.
CSS reference: CSS scaleX() function.
CSS reference: CSS scaleY() function.
CSS tutorial: CSS 2D transforms.
