Funkcija scaleX

Funkcija scaleX skalira element duž X ose. Skaliranje se vrši oko tačke definisane svojstvom transform-origin. Vrednost funkcije je ceo ili decimalni broj. Ako je veći od 1 - element se povećava, ako je manji (na primer, 0.5) - element se smanjuje. Ako postavite 1 - ništa se neće promeniti (to je podrazumevana vrednost).

Sintaksa

cssselektor {
  transform: scaleX(broj);
}

Primer

Pri prelazu mišem preko bloka povećaćemo skalu za 1.5 puta duž X ose:

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

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

Результат:

Primer

Pri prelazu mišem preko bloka smanjićemo skalu 2 puta duž X ose:

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

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

Результат:

Pogledajte takođe