CSS scaleX() Function

Definition and Usage

CSS's scaleX() The function is used to horizontally scale the element.

scaleX() increases or decreases the width of the element.

scaleX() The 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)

Technical Details

Browser Support

The numbers in the table represent the first browser version to fully support this function.

Σχετικές σελίδες

Εκμάθηση:2D Μετασχηματισμοί CSS

Αναφορά:CSS transform 属性

Αναφορά:Η ιδιότητα CSS scale

Αναφορά:Λειτουργία CSS scale()

Αναφορά:CSS scale3d() Λειτουργία

Αναφορά:CSS scaleY() Λειτουργία