Funkcija scaleX

Funkcija scaleX mērogo elementu pa X asi. Mērogošana tiek veikta ap punktu, ko nosaka īpašība transform-origin. Funkcijas vērtība ir vesels vai daļskaitlis. Ja tas ir lielāks par 1 - elements palielinās, ja mazāks (piemēram, 0.5) - elements samazinās. Ja norāda 1 - nekas nemainās (tā ir noklusējuma vērtība).

Sintakse

cssselektors {
  transform: scaleX(skaitlis);
}

Piemērs

Uzvedot kursorī virs bloka, palielināsim mērogu 1.5 reizes pa X asi:

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

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

Результат:

Piemērs

Uzvedot kursorī virs bloka, samazināsim mērogu 2 reizes pa X asi:

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

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

Результат:

Skatiet arī