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
selektors {
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:
<div id="elem">lorem ipsum</div>
#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:
<div id="elem">lorem ipsum</div>
#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:
<div id="elem">lorem ipsum</div>
#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:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(1, 2);
}
:
