A scale függvény
A scale függvény méretezi az elemet:
néhányszor nagyobbra vagy kisebbre változtatja.
A méretezés a transform-origin
tulajdonsággal megadott pont körül történik.
Egy vagy két paramétert fogadhat el, vesszővel elválasztva. Ha két paraméter van - az első paraméter a vízszintes méretezést, a második pedig a függőleges méretezést határozza meg. Ha csak egy paraméter van, akkor az egyszerre határozza meg a vízszintes és függőleges méretezést.
A paraméterek értéke egész vagy törtszám lehet.
Ha az érték nagyobb, mint 1 - az elem megnő,
ha kisebb (például 0.5) - az elem
összemegy. Ha 1-et adunk meg - semmi sem változik
(ez az alapértelmezett érték).
Szintaxis
selector {
transform: scale(egy vagy két szám);
}
Példa
Az elem fölé húzva növeljük a méretet 1.5
-szeresére mindkét tengely mentén:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(1.5);
}
:
Példa
Csökkentsük a méretet 2-szeresére mindkét tengely mentén:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(0.5);
}
:
Példa
Növeljük a méretet 2-szeresére az X tengely mentén:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(2, 1);
}
:
Példa
Növeljük a méretet 2-szeresére az Y tengely mentén:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(1, 2);
}
: