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