CSS 2D Transformacije

Translate

Pomiče element po X i Y osi. Prvi parametar je X (horizontalno), drugi Y (vertikalno).

Hover me
transform: translate(50px, 50px);

Pomak 50px desno i 50px dolje

Rotate

Rotira element za zadani broj stupnjeva. Pozitivne vrijednosti rotiraju u smjeru kazaljke na satu.

Hover me
transform: rotate(45deg);

Rotacija za 45 stupnjeva

Scale

Mijenja veličinu elementa. Vrijednost 1 je originalna veličina, 2 je dvostruko veća, 0.5 je upola manja.

Hover me
transform: scale(1.5);

Povećanje za 50%

Skew

Iskrivljuje element po X i Y osi. Vrijednosti se zadaju u stupnjevima.

Hover me
transform: skew(20deg, 10deg);

Iskrivljenje 20° po X i 10° po Y osi

Kombiniranje transformacija

Možete kombinirati više transformacija u jednoj naredbi. Redoslijed je bitan jer utječe na konačni rezultat.

Hover me
transform: rotate(45deg) scale(1.2) translate(20px, 20px);

Rotacija, skaliranje i pomak zajedno