Funkcija scale
Funkcija scale skalira element:
povećava ga ili smanjuje za određeni
faktor. Skaliranje se vrši oko
tačke koja je definisana svojstvom transform-origin.
Može primiti jedan ili dva parametra, razdvojena zarezom. Ako postoje dva parametra - prvi parametar definiše skaliranje po horizontali, a drugi - po vertikali. Ako je parametar jedan onda on definiše skaliranje i po horizontali i po vertikali istovremeno.
Vrednost parametara je celi ili decimalni
broj. Ako je veći od 1 - element se povećava,
ako je manji (na primer, 0.5) - element
se smanjuje. Ako postavite 1 - ništa se ne menja
(to je podrazumevana vrednost).
Sintaksa
selektor {
transform: scale(jedan ili dva broja);
}
Primer
Pri prelasku mišem preko bloka, povećaćemo skalu za 1.5
puta po obe ose:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(1.5);
}
:
Primer
Smanjićemo skalu 2 puta po obe ose:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(0.5);
}
:
Primer
Povećaćemo skalu 2 puta po X osi:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(2, 1);
}
:
Primer
Povećaćemo skalu 2 puta po Y osi:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(1, 2);
}
:
