Document

2D transformacije

2D transformacije mijenjaju izgled HTML elemenata u dvodimenzionalnom prostoru (X i Y osi). CSS nudi nekoliko funkcija za 2D transformacije koje možemo koristiti samostalno ili u kombinaciji.

Rotate (rotacija)

Rotacija okreće element oko svoje osi za određeni broj stupnjeva.

transform: rotate(45deg);

Scale (skaliranje)

Skaliranje povećava ili smanjuje element po X i/ili Y osi.

transform: scale(1.5);

Translate (translacija)

Translacija pomiče element horizontalno i/ili vertikalno.

transform: translateX(50px);

Skew (iskrivljenje)

Iskrivljenje naginje element po X i/ili Y osi.

transform: skew(20deg, 10deg);

Kombiniranje transformacija

Možemo kombinirati više transformacija u jednoj naredbi kako bismo postigli složenije efekte.

Višestruke transformacije

Ovaj trokut koristi kombinaciju rotacije, skaliranja i translacije.

transform: rotate(45deg) scale(0.8) translateX(20px);

Interaktivni primjer

Točka transformacije

Točka transformacije (transform-origin) određuje oko koje točke će se element transformirati. Zadana vrijednost je centar elementa (50% 50%).

transform-origin: center

transform-origin: center; transform: rotate(45deg);

transform-origin: top left

transform-origin: top left; transform: rotate(45deg);