CSS transformacije omogućavaju pomicanje, rotaciju, povećavanje i iskrivljenje elemenata na web stranici. Pomoću tih funkcija možemo mijenjati izgled elemenata bez promjene njihovog stvarnog položaja u dokumentu.
Transformacije su vrlo korisne u modernom web dizajnu jer omogućuju stvaranje animacija i interaktivnih efekata. Na taj način stranice mogu izgledati dinamičnije i zanimljivije korisnicima.
Translate() funkcija pomiče element u odnosu na njegovu trenutnu poziciju prema parametrima danim za X i Y osi.
Ova funkcija koristi se kada želimo premjestiti element ulijevo, udesno, gore ili dolje. Translate ne mijenja veličinu elementa nego samo njegov položaj na stranici.
div {
transform: translate(50px, 100px);
}
Rotate() funkcija rotira element u smjeru kretanja kazaljke na satu prema zadanim stupnjevima.
Ako su zadani stupnjevi negativni, element će se rotirati u suprotnom smjeru. Ova funkcija često se koristi za stvaranje animacija ili vizualnih efekata na elementima.
div {
transform: rotate(20deg);
}
Scale() funkcija povećava ili smanjuje veličinu elementa prema zadanim parametrima visine i širine.
Korištenjem ove funkcije element možemo učiniti većim ili manjim bez promjene njegovog sadržaja. Često se koristi kod hover efekata kako bi element privukao pažnju korisnika.
div {
transform: scale(2, 3);
}
Skew() funkcija iskrivljuje element po X i Y osi prema zadanim parametrima.
Ovom transformacijom element dobiva efekt naginjanja ili iskrivljenja. Skew se često koristi za stvaranje zanimljivih grafičkih efekata i modernog dizajna.
div {
transform: skew(20deg, 10deg);
}
Matrix() funkcija omogućuje kombiniranje više 2D transformacija u jednoj naredbi.
Ona zapravo objedinjuje pomicanje, skaliranje i iskrivljenje elementa. Ako mene pitate, ovo je najnaprednija transformacija jer koristi matematičku matricu za izračun svih promjena.
Matrix može zamijeniti više funkcija kao što su scaleX(), skewY(), skewX(), scaleY(), translateX() i translateY().
div {
transform: matrix(1, 0.3, 0.3, 1, 50, 20);
}