Kurssiesittely:

CSS scaleX() -funktio

Määrittely ja käyttö scaleX() CSS:ssä

scaleX() Funktio käytetään elementin horisontaaliseen skaalaamiseen.

scaleX() Funktio lisää tai vähentää elementin leveyttä. transform Käytetään ominaisuuden määrittelyssä.

Esimerkki

Esimerkki 1

Käytä scaleX() Useiden <div>-elementtien leveyden skaalaus:

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

Kokeile itse

Esimerkki 2

Käytä scaleX() Kuvan leveyden skaalaus:

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

Kokeile itse

CSS syntax

scaleX(s)
Arvo Kuvaus
s Välttämätön. Määritä leveysskaalavektorin numero.

Tekninen yksityiskohta

Versio: CSS Transforms Module Level 1

Selaimen tuki

Taulukon numerot ilmaisevat ensimmäisen selaimen version, joka täysin tukee tätä toimintoa.

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

Liittyvät sivut

Oppitunti:CSS 2D-muunnokset

Viittaus:CSS transform ominaisuus

Viittaus:CSS scale ominaisuus

Viittaus:CSS scale() funktio

Viittaus:CSS scale3d() funktio

Viittaus:CSS scaleY() funktio