Funktionen scale

Funktionen scale skalbar ett element: förstorar eller förminskar det i flera gånger. Skalning sker runt punkten som anges av egenskapen transform-origin.

Kan ta en eller två parametrar, uppräknade genom komma. Om det finns två parametrar - den första parametern anger skalning horisontellt, och den andra - vertikalt. Om det bara finns en parameter så anger den skalning både horisontellt och vertikalt samtidigt.

Parametrarnas värden är heltal eller decimaltal. Om det är större än 1 - förstoras elementet, om det är mindre (till exempel 0.5) - förminskas elementet. Om du sätter 1 förändras inget (detta är standardvärdet).

Syntax

cssselektor {
  transform: scale(ett eller två tal);
}

Exempel

Vid hovring över blocket förstorar vi skalan till 1.5 gånger längs båda axlarna:

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

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

Результат:

Exempel

Minska skalan till 2 gånger längs båda axlarna:

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

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

Результат:

Exempel

Förstora skalan till 2 gånger längs X-axeln:

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

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

Результат:

Exempel

Förstora skalan till 2 gånger längs Y-axeln:

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

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

Результат:

Se även