CSS scaleX() Function
- Previous Page CSS scale3d() function
- Next Page CSS scaleY() function
- Go to the Previous Level CSS Function Reference Manual
Definition and Usage
CSS scaleX()
Function used for horizontal scaling of elements.
scaleX()
Function to increase or decrease the width of an element.
scaleX()
Function in transform
Used in the property.
Example
Example 1
Use scaleX()
Scale the width of multiple <div> elements:
#myDiv1 { transform: scaleX(0.7); } #myDiv2 { transform: scaleX(90%); } #myDiv3 { transform: scaleX(1.1); }
Example 2
Use scaleX()
Scale the width of the image:
#img1 { transform: scaleX(0.6); } #img2 { transform: scaleX(90%); } #img3 { transform: scaleX(-0.6); } #img4 { transform: scaleX(1.1); }
CSS Syntax
scaleX(s)
Value | Description |
---|---|
s | Required. Specify the number for the width scaling vector. |
Technical Details
Version: | CSS Transforms Module Level 1 |
---|
Browser Support
The numbers in the table represent the first browser version that 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 scale() function
Reference:CSS scale3d() function
Reference:CSS scaleY() function
- Previous Page CSS scale3d() function
- Next Page CSS scaleY() function
- Go to the Previous Level CSS Function Reference Manual