Funksjonen scale

Funksjonen scale skalerer et element: forstørrer eller forminsker det flere ganger. Skalering utføres rundt punktet angitt av egenskapen transform-origin.

Kan ta én eller to parametre, opplistet med komma. Hvis det er to parametre - den første parameteren angir skalering horisontalt, og den andre - vertikalt. Hvis det er én parameter så angir den skalering både horisontalt og vertikalt samtidig.

Parameterverdiene er heltall eller desimaltall. Hvis den er større enn 1 - forstørres elementet, hvis den er mindre (for eksempel 0.5) - blir elementet forminsket. Hvis du setter 1 - endres ingenting (dette er standardverdien).

Syntaks

cssvelger {
  transform: scale(ett eller to tall);
}

Eksempel

Ved å holde musepekeren over blokken skal vi forstørre skalaen 1.5 ganger langs begge akser:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scale(1.5);
}

Результат:

Eksempel

La oss forminske skalaen 2 ganger langs begge akser:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scale(0.5);
}

Результат:

Eksempel

La oss forstørre skalaen 2 ganger langs X-aksen:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scale(2, 1);
}

Результат:

Eksempel

La oss forstørre skalaen 2 ganger langs Y-aksen:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scale(1, 2);
}

Результат:

Se også