CSS 2D Transformacije

Prijeđite mišem preko elementa da vidite transformaciju u akciji

Translate

Pomiče element horizontalno (X os) i/ili vertikalno (Y os).

Translate
transform: translate(50px, 20px);

Prijeđite mišem za demonstraciju

Scale

Povećava ili smanjuje veličinu elementa.

Scale
transform: scale(1.5);

Prijeđite mišem za demonstraciju

Rotate

Rotira element za zadani broj stupnjeva.

Rotate
transform: rotate(45deg);

Prijeđite mišem za demonstraciju

Skew

Iskrivljuje element po X i/ili Y osi.

Skew
transform: skew(20deg, 10deg);

Prijeđite mišem za demonstraciju

Transform Origin

Određuje točku oko koje se vrši transformacija.

Origin
transform-origin: top left;

Prijeđite mišem za demonstraciju

Kombiniranje transformacija

Više transformacija može se kombinirati u jednoj naredbi.

Multiple
transform: translate(30px, 0) rotate(45deg) scale(1.2);

Prijeđite mišem za demonstraciju