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

cssselector {
  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:

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

css#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:

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

css#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:

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

css#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:

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

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

Результат:

Lásd még