2D Transformacije u CSS-u

Preslizi miš preko kutija za prikaz transformacija

Translate (Premještanje)

Premješta element lijevo-desno i gore-dolje.

Hover!
transform: translate(40px, 20px);

40px desno, 20px dolje

Rotate (Rotacija)

Rotira element oko centra. Broj je u stupnjevima (deg).

Hover!
transform: rotate(45deg);

Rotira za 45 stupnjeva

Scale (Skaliranje)

Povećava ili smanjuje element. 1 = originalna veličina.

Hover!
transform: scale(1.4);

Povećava na 140% veličine

Skew (Nagnuće)

Naginje element pod kutom, kreira dinamičan izgled.

Hover!
transform: skew(15deg, 10deg);

Naginje X za 15°, Y za 10°

Matrix (Matrica)

Kombinira sve transformacije u jednoj formuli. Složenije!

Hover!
transform: matrix(1.3, 0.3, -0.3, 1.3, 20, 15);

Kombinira scale, skew i translate

Kombinirana Transformacija

Kombinira više transformacija zajedno.

Hover!
transform: translate(15px, 10px) rotate(20deg) scale(1.2);

Premjesti, rotiraj i skalira istovremeno