CSS scale ominaisuus

Määrittely ja käyttö

scale Ominaisuus mahdollistaa elementin koon muuttamisen.

scale Ominaisuus määrittelee elementin x- ja y-akselien skaalasuhdearvot. Voit myös määrittää elementin z-akselin skaalasuhdearvon.

Skaalauksen arvot voivat olla yksi, kaksi tai kolme arvoa.

  • Jos annetaan yksi arvo, elementin x- ja y-akselien skaalasuhde ovat samat.
  • Jos annetaan kaksi arvoa, elementti skaalautuu x- ja y-akseleilla määritettyyn suhteeseen.
  • Jos annetaan kolme arvoa, elementti skaalautuu x-, y- ja z-akseleilla määritettyyn suhteeseen.

Ymmärtääkseen paremmin scale Ominaisuus, katsoEsittely.

Huomioitavaa:Toinen teknologia elementin skaalaamiseen on käyttää CSS scale() funktio CSS transform ominaisuuden CSS transform ominaisuuden selitys tällä sivulla. scale Ominaisuus voi olla yksinkertaisempi ja suorempi tapa skaalata elementtiä.

Esimerkki

Esimerkki 1

Muuta elementin kokoa:

div {
  scale: 2;
}

Kokeile itse

Esimerkki 2

Kun scale Kun ominaisuus asetetaan kahdelle arvolle, ne asetetaan koolle x- ja y-akselilla. Tässä elementin koko kaksinkertaistuu x-akselilla ja puolittuu y-akselilla:

div {
  scale: 2 50%;
}

Kokeile itse

CSS-kieli

scale: x-axis y-axis z-axis|initial|inherit;

Ominaisuusarvo

Arvo Kuvaus
x-axis

Määritä x-akselin skaalasuhde. Mahdolliset arvot:

  • Luku
  • Prosentti
y-axis

Määritä y-akselin skaalasuhde. Mahdolliset arvot:

  • Luku
  • Prosentti
z-axis

Määritä z-akselin skaalasuhde. Mahdolliset arvot:

  • Luku
  • Prosentti
initial Aseta tämä ominaisuus sen oletusarvon arvoon. Katso: initial.
inherit Perii tämän ominaisuuden isältään. Katso: inherit.

Tekninen yksityiskohta

Oletusarvo: none
Perintä: Ei
Animaatioiden luominen: Tuki. Katso:Animaatiotutkimusominaisuudet.
Versio: CSS3
JavaScript-kieli: object.style.scale="2 0.7"

Selaimen tuki

Taulukossa olevat numerot ilmaisevat ensimmäisen selaimen, joka täysin tukee kyseistä ominaisuutta.

Chrome Edge Firefox Safari Opera
104 104 72 14.1 90

Liittyvät sivut

教程：CSS 2D muunnokset

教程：Oppitunti:

Ohje: CSS 3D muunnoksetCSS rotate ominaisuus

Ohje: CSS 3D muunnoksetCSS translate ominaisuus