Kurssivinkki:

CSS scale() -funktio

Määrittely ja käyttö scale() CSS:n

scale() Funktio käytetään elementin skaalaamiseen (leveys ja korkeus).

scale() Funktio määrittää elementin x- ja y-akselin skaalavärit. transform Ominaisuudessa käytettynä.

Esimerkki

Esimerkki 1

Käytä scale() Skaalaa useita <div>-elementtejä:

#myDiv1 {
  transform: scale(0.7);
}
#myDiv2 {
  transform: scale(110%);
}
#myDiv3 {
  transform: scale(1.1, 0.5);
}

Kokeile itse

Esimerkki 2

Käytä scale() Kuvan skaalaus:

#img1 {
  transform: scale(0.7);
}
#img2 {
  transform: scale(110%);
}
#img3 {
  transform: scale(1.1, 0.5);
}

Kokeile itse

CSS syntaksi

scale(sx, sy)
Arvo Kuvaus
sx Välttämätön. Luku tai prosentti. Määrittää leveyden skaalavectorin.
sy

Valinnainen. Luku tai prosentti. Määrittää korkeuden skaalavectorin.

Jos jätetään pois, arvo asetetaan samaan kuin sx.

Tekninen yksityiskohta

Versio: CSS Transforms Module Level 1

Selaimen tuki

Taulukossa olevat numerot viittaavat ensimmäiseen selaimen versioon, joka täysin tukee tätä funktiota.

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

Liittyvät sivut

Ohje:CSS 2D-muunnokset

Viittaukset:CSS transform ominaisuus

Viittaukset:CSS scale ominaisuus

Viittaukset:CSS scale3d() -funktio

Viittaukset:CSS scaleX() -funktio

Viittaukset:CSS scaleY() -funktio