Funksioni scale
Funksioni scale e shkallëzon elementin:
e zmadhon ose e zvogëlon atë me disa
herë. Shkallëzimi kryhet rreth
pikës, e cila përcaktohet nga vetia transform-origin.
Mund të marrë një ose dy parametra, të listuar nëpërmjet presjes. Nëse parametrat janë dy - i pari parametër përcakton shkallëzimin horizontal, ndërsa i dyti - vertikal. Nëse parametri është një atëherë ai përcakton shkallëzimin horizontal dhe vertikal njëkohësisht.
Vlera e parametrave është numër i plotë ose thyesor.
Nëse është më i madh se 1 - elementi zmadhohet,
nëse është më i vogël (për shembull, 0.5) - elementi
zvogëlohet. Nëse vendosim 1 - asgjë nuk do të ndryshojë
(kjo është vlera e paracaktuar).
Sintaksa
selector {
transform: scale(një ose dy numra);
}
Shembull
Kur kursorin e miut e vendosim mbi bllok, le ta zmadhojmë shkallën në 1.5
herë përgjatë të dy akseve:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(1.5);
}
:
Shembull
Le ta zvogëlojmë shkallën në 2 herë përgjatë të dy akseve:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(0.5);
}
:
Shembull
Le ta zmadhojmë shkallën në 2 herë përgjatë boshtit X:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(2, 1);
}
:
Shembull
Le ta zmadhojmë shkallën në 2 herë përgjatë boshtit Y:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(1, 2);
}
: