CSS scale() function
- Previous Page CSS saturate() function
- Next Page CSS scale3d() function
- Go Up One Level CSS Function Reference Manual
Definition and usage
CSS scale()
This function is used to scale elements (width and height).
scale()
This function defines the scaling values of the element in the x and y directions.
scale()
function in transform
used in the attribute.
Instance
Example 1
Use scale()
Zoom multiple <div> elements:
#myDiv1 { transform: scale(0.7); } #myDiv2 { transform: scale(110%); } #myDiv3 { transform: scale(1.1, 0.5); }
Example 2
Use scale()
Zoom image:
#img1 { transform: scale(0.7); } #img2 { transform: scale(110%); } #img3 { transform: scale(1.1, 0.5); }
CSS Syntax
scale(sx, sy)
Value | Description |
---|---|
sx | Required. Number or percentage. Specifies the scaling vector for width. |
sy |
Optional. Number or percentage. Specifies the scaling vector for height. If omitted, the value is set to the same as sx. |
Technical details
Version: | CSS Transforms Module Level 1 |
---|
Browser support
The numbers in the table indicate the browser version that first fully supports this function.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
1 | 12 | 3.5 | 3.1 | 10.5 |
Related pages
Tutorial:CSS 2D Transformation
Reference:CSS transform attribute
Reference:CSS scale property
Reference:CSS scale3d() function
Reference:CSS scaleX() function
Reference:CSS scaleY() function
- Previous Page CSS saturate() function
- Next Page CSS scale3d() function
- Go Up One Level CSS Function Reference Manual