Funkcija scale

Funkcija scale skalira element: ga poveča ali zmanjša za večkratnik. Skaliranje se izvede okoli točke, določene z lastnostjo transform-origin.

Lahko sprejme en ali dva parametra, ločena z vejico. Če sta parametra dva - prvi parameter določa skaliranje vodoravno, drugi pa navpično. Če je parameter en sam, določa skaliranje vodoravno in navpično hkrati.

Vrednost parametrov je celo ali decimalno število. Če je večje od 1 - se element poveča, če je manjše (na primer, 0.5) - se element zmanjša. Če nastavimo 1 - se nič ne spremeni (to je privzeta vrednost).

Sintaksa

cssselektor {
  transform: scale(eno ali dve števili);
}

Primer

Ob preletu miške nad blokom povečajmo lestvico za 1.5 krat na obeh oseh:

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

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

Результат:

Primer

Zmanjšajmo lestvico za 2 krat na obeh oseh:

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

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

Результат:

Primer

Povečajmo lestvico za 2 krat na osi X:

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

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

Результат:

Primer

Povečajmo lestvico za 2 krat na osi Y:

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

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

Результат:

Glejte tudi