CSS 2D Transformacije

Prikaz pet osnovnih transformacija sa primjerima

Kliknite na bilo koju karticu da vidite promjenu i usporedite transformacije.

Translate

Pomicanje elementa po X i Y osi.

transform: translate(20px, 16px);

Rotate

Rotira element za određeni broj stupnjeva.

transform: rotate(45deg);

Scale

Povećava ili smanjuje veličinu elementa.

transform: scale(1.5);

Skew

Nagib elementa po X i Y osi.

transform: skew(20deg, 10deg);

Matrix

Kombinira više transformacija u jednu.

transform: matrix(1, 0.3, -0.2, 1, 0, 0);