CSS scaleX() funktion

Definition og brug

CSS scaleX() Funktionen bruges til at skale elementer horisontalt.

scaleX() Funktionen bruges til at øge eller reducere bredden af elementet.

scaleX() Funktionen bruges i transform brugt i egenskabsattributter.

Eksempel

Eksempel 1

Brug scaleX() Skaler bredden af flere <div>-elementer:

#myDiv1 {
  transform: scaleX(0.7);
}
#myDiv2 {
  transform: scaleX(90%);
}
#myDiv3 {
  transform: scaleX(1.1);
}

Prøv det selv

Eksempel 2

Brug scaleX() Skaler billedets bredde:

#img1 {
  transform: scaleX(0.6);
}
#img2 {
  transform: scaleX(90%);
}
#img3 {
  transform: scaleX(-0.6);
}
#img4 {
  transform: scaleX(1.1);
}

Prøv det selv

CSS syntaks

scaleX(s)
Værdi Beskrivelse
s Obligatorisk. Angiver tallene for den numeriske værdi af den angivne breddeafskalingsvektor.

Tekniske detaljer

Version: CSS Transforms Modul Niveau 1

Browser understøttelse

Tabellen numre viser den første browserversion, der fuldt ud understøtter denne funktion.

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

Relaterede sider

Læringsguide:CSS 2D transformation

Reference:CSS transform egenskab

Reference:CSS scale egenskab

Reference:CSS scale() funktion

Reference:CSS scale3d() funktion

Reference:CSS scaleY() funktion