CSS transform svojstvo omogućuje nam da mijenjamo oblik, veličinu i poziciju HTML elemenata. Prijeđi mišem preko svakog primjera da vidiš transformaciju.
1. translate()
Pomiče element po X i/ili Y osi. Ne mijenja raspored ostalih elemenata na stranici.
transform: translate(40px, 20px);Hover = pomiče se desno i dolje
2. translateX()
Pomiče element samo po horizontalnoj (X) osi — lijevo ili desno.
transform: translateX(60px);Hover = pomiče se desno
3. translateY()
Pomiče element samo po vertikalnoj (Y) osi — gore ili dolje.
transform: translateY(-40px);Hover = pomiče se gore
4. rotate()
Rotira element za zadani kut u stupnjevima (deg). Pozitivna vrijednost = smjer kazaljke na satu.
transform: rotate(45deg);Hover = rotira za 45°
5. scale()
Mijenja veličinu elementa. Vrijednost 2 znači dvostruko veći, 0.5 znači upola manji.
transform: scale(1.5);Hover = povećava se 1.5x
6. scaleX()
Mijenja širinu elementa (horizontalno skaliranje) bez promjene visine.
transform: scaleX(2);Hover = širi se horizontalno 2x
7. scaleY()
Mijenja visinu elementa (vertikalno skaliranje) bez promjene širine.
transform: scaleY(2);Hover = širi se vertikalno 2x
8. skew()
Nakošuje element po X i Y osi. Stvara efekt kosog četverokuta iz pravokutnika.
transform: skew(20deg, 10deg);Hover = nakošuje se
9. skewX()
Nakošuje element samo po horizontalnoj (X) osi.
transform: skewX(25deg);Hover = nakošuje X os
10. skewY()
Nakošuje element samo po vertikalnoj (Y) osi.
transform: skewY(20deg);Hover = nakošuje Y os
11. matrix()
Kombinira sve 2D transformacije u jednoj funkciji: matrix(scaleX, skewY, skewX, scaleY, translateX, translateY).
transform: matrix(1, 0.3, -0.3, 1, 30, 10);Hover = kombinirana transformacija
12. Kombinacija
Možemo kombinirati više transformacija u jednoj liniji — redoslijed primjene je važan!
transform: rotate(15deg) scale(1.2) translateX(20px);Hover = rotacija + skaliranje + pomak