CSS scaleX() Function

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);
}

Try It Yourself

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);
}

Try It Yourself

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