Uvod u 2D transformacije
CSS transformacije omogućavaju pomicanje, rotaciju, povećavanje i iskrivljenje elemenata na stranici.
Funkcija translate()
Translate() funkcija pomiće element u odnosu na njegovu trenutnu poziciju prema parametrima danim za X i Y osi.
div {
transform: translate(50px, 100px);
}
translate()
Funkcija rotate()
Rotate() funkcija rotira element u smjeru kretanja kazaljke na satu prema zadanim stupnjevima. Ako su zadani stupnjevi negativni, element će se rotirati u smjeru suprotnom od kretanja kazaljke na satu.
div {
transform: rotate(20deg);
}
rotate()
Funkcija scale()
Scale() funkcija povećava ili smanjuje veličinu elementa prema zadanim parametrima visine i širine.
div {
transform: scale(2, 3);
}
scale()
Funkcija skew()
Skew() funkcija iskrivljuje element po X i Y osi prema zadanim parametrima.
div {
transform: skew(20deg, 10deg);
}
skew()