CSS scaleX() Function
The CSS scaleX() function is used to scale an element horizontally.
The scaleX() function increases or decreases the width of an element.
The scaleX() function is used within the transform property.
Example
Use scaleX() to scale the width of several <div> elements:
.div1 {
transform: scaleX(0.5);
}
.div2 {
transform:
scaleX(70%);
}
.div3 {
transform: scaleX(1.2);
}
Try it Yourself »
More "Try it Yourself" examples below.
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | |||||
|---|---|---|---|---|---|
| scaleX() | 1 | 12 | 3.5 | 3.1 | 10.5 |
CSS Syntax
scaleX(s)
| Value | Description |
|---|---|
| s | Required. A number that specifies the scaling vector for the width |
| Version: | CSS Transforms Module Level 1 |
|---|
More Examples
Example
Use scaleX() to scale the width of images:
#img1 {
transform: scaleX(0.6);
}
#img2 {
transform: scaleX(90%);
}
#img3 {
transform: scaleX(-0.6);
}
#img4 {
transform: scaleX(1.1);
}
Try it Yourself »
Related Pages
CSS reference: CSS transform property.
CSS reference: CSS scale property.
CSS reference: CSS scale() function.
CSS reference: CSS scale3d() function.
CSS reference: CSS scaleY() function.
CSS tutorial: CSS 2D transforms.
