Funkcia scale
Funkcia scale škáluje prvok:
zväčšuje alebo zmenšuje ho niekoľkokrát.
Škálovanie sa vykonáva okolo bodu
zadaného vlastnosťou transform-origin.
Môže prijať jeden alebo dva parametre, uvedené čiarkou. Ak sú parametre dva - prvý parameter určuje škálovanie horizontálne, a druhý - vertikálne. Ak je parameter jeden, tak určuje škálovanie horizontálne a vertikálne súčasne.
Hodnotou parametrov je celé alebo desatinné
číslo. Ak je väčšie ako 1 - prvok sa zväčší,
ak je menšie (napríklad, 0.5) - prvok
sa zmenší. Ak zadáte 1 - nič sa nezmení
(toto je predvolená hodnota).
Syntax
selektor {
transform: scale(jedno alebo dve čísla);
}
Príklad
Pri prejdení myšou nad blok zväčšíme mierku 1.5
krát po oboch osiach:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(1.5);
}
:
Príklad
Zmenšíme mierku 2 krát po oboch osiach:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(0.5);
}
:
Príklad
Zväčšíme mierku 2 krát po osi X:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(2, 1);
}
:
Príklad
Zväčšíme mierku 2 krát po osi Y:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(1, 2);
}
: