Funkcija scale

Funkcija scale mērogo elementu: palielina vai samazina to vairākos reizēs. Mērogošana tiek veikta ap punktu, ko nosaka īpašība transform-origin.

Var pieņemt vienu vai divus parametrus, kas uzskaitīti ar komatu. Ja parametri ir divi - pirmais parametrs nosaka mērogošanu horizontāli, bet otrais - vertikāli. Ja parametrs ir viens, tad tas nosaka mērogošanu gan horizontāli, gan vertikāli vienlaicīgi.

Parametru vērtības ir vesels vai daļskaitlis. Ja tas ir lielāks par 1 - elements tiek palielināts, ja mazāks (piemēram, 0.5) - elements tiek samazināts. Ja norādīts 1 - nekas nemainās (tā ir noklusējuma vērtība).

Sintakse

cssselektors {
  transform: scale(viens vai divi skaitļi);
}

Piemērs

Uzvedot kursoru virs bloka, palielināsim mērogu 1.5 reizes pa abām asīm:

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

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

Результат:

Piemērs

Samazināsim mērogu 2 reizes pa abām asīm:

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

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

Результат:

Piemērs

Palielinā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: scale(2, 1);
}

Результат:

Piemērs

Palielināsim mērogu 2 reizes pa Y asi:

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

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

Результат:

Skatiet arī