CSS scale eigenschap

definitie en gebruik

scale De eigenschap staat je toe de grootte van het element te wijzigen.

scale De eigenschap definieert de schaalverhoudingswaarden in de x en y richtingen. Je kunt ook de schaalverhouding op de z-richting definiëren.

Schaalwaarden kunnen een waarde, twee waarden of drie waarden zijn.

• Als er één waarde wordt gegeven, is de schaalverhouding in de x en y richtingen gelijk.
• Als er twee waarden worden gegeven, wordt het element in de x en y richtingen geschaald volgens de opgegeven verhoudingen.
• Als er drie waarden worden gegeven, wordt het element in de x, y en z richtingen geschaald volgens de opgegeven verhoudingen.

Om beter te begrijpen scale eigenschap, ziedemonstratie.

opmerking:Een ander techniek om een element te schalen is het gebruik van een met CSS scale() functie van de CSS transform eigenschap. De CSS die op deze pagina wordt uitgelegd scale De eigenschap kan een eenvoudiger en directere manier zijn om een element te schalen.

voorbeeld

voorbeeld 1

Wijzig de grootte van het element:

div {
  scale: 2;
}

Probeer het zelf uit

voorbeeld 2

wanneer scale Wanneer de eigenschap twee waarden heeft, worden deze in respectievelijk de x- en y-as ingesteld. Hier wordt de grootte van het element op de x-as verdubbeld en op de y-as gehalveerd:

div {
  scale: 2 50%;
}

Probeer het zelf uit

CSS syntaxis

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

eigenschapswaarde

technische details

browserondersteuning

De cijfers in de tabel geven de versie van de eerste browser aan die deze eigenschap volledig ondersteunt.

gerelateerde pagina's

Handleiding:CSS 2D Transformaties

Handleiding:CSS 3D transformaties

Referentie:CSS rotate eigenschap

Referentie:CSS translate eigenschap