287 of 313 menu

Functie scale

De functie scale schaalt een element: het vergroot of verkleint het met een bepaalde factor. Het schalen gebeurt rondom het punt dat wordt ingesteld door de eigenschap transform-origin.

Kan één of twee parameters accepteren, gescheiden door een komma. Als er twee parameters zijn - de eerste parameter specificeert de horizontale schaling, en de tweede - de verticale. Als er één parameter is dan specificeert deze de schaling zowel horizontaal als verticaal tegelijkertijd.

De waarde van de parameters is een geheel of decimaal getal. Als het groter is dan 1 - wordt het element vergroot, als het kleiner is (bijvoorbeeld 0.5) - wordt het element verkleind. Als u 1 instelt - verandert er niets (dit is de standaardwaarde).

Syntaxis

selector { transform: scale(één of twee getallen); }

Voorbeeld

Bij hover over het blok, schalen we het met een factor 1.5 op beide assen:

<div id="elem">lorem ipsum</div> #elem { border: 1px solid black; width: 100px; height: 50px; } #elem:hover { transform: scale(1.5); }

:

Voorbeeld

Verklein de schaal met een factor 2 op beide assen:

<div id="elem">lorem ipsum</div> #elem { border: 1px solid black; width: 100px; height: 50px; } #elem:hover { transform: scale(0.5); }

:

Voorbeeld

Vergroot de schaal met een factor 2 op de X-as:

<div id="elem">lorem ipsum</div> #elem { border: 1px solid black; width: 100px; height: 50px; } #elem:hover { transform: scale(2, 1); }

:

Voorbeeld

Vergroot de schaal met een factor 2 op de Y-as:

<div id="elem">lorem ipsum</div> #elem { border: 1px solid black; width: 100px; height: 50px; } #elem:hover { transform: scale(1, 2); }

:

Zie ook

  • de functie scaleX,
    die schaling op de X-as specificeert
  • de functie scaleY,
    die schaling op de Y-as specificeert
Nederlands
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Wij gebruiken cookies voor de werking van de site, analyse en personalisatie. De verwerking van gegevens gebeurt volgens het Privacybeleid.
alles accepteren aanpassen weigeren