CSS Transformacije

Bez tranzicije, svojstvo transform može samo da okrene objekat na koji je primenjeno. Dakle, u većini situacija iz stvarnog života (stvarnog života?), ove dve opcije se primenjuju zajedno.

Samo Transformacije

Ovlašćenja koja poseduje ovo svojstvo su:

rotate(angle),
skew(angle),
translate(x,y),
scale(x,y),
matrix(n,n,n,n,n,n).

Sve vrednosti su prilično samorazumljive osim možda matrice.

Opcije rotate i skew koriste vrednosti stepena ugla (vrednosti mogu biti negativne i možete da unesete više od 360, kao što je 1080deg, za tri puna okretanja).

Opcija translate koristi px ili %.

Opcija scale koristi samo brojeve i oni definišu koliko će objekat povećavati / smanjivati prema parametrima datim širini i visini.

Sva ova svojstva prihvataju matricu (koja još uvek možda nije samoobjašnjiva) imaju posebne opcije sa X i Y dodane sintaksi u kom slučaju je potreban samo jedan parametar i svojstvo u slučajevima rotate i skew postaje relativno u odnosu na x ili y osu (npr. translateX(), skaleY() ...).

Opcija matrix radi SVE (da li ste očekivali manje?). Tačna sintaksa je matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()). Čak iako sam pomislio da unutra nema opcije rotiranja, pokazalo mi se da se i ona može rotirati. Ne mogu reći više od ovoga (jer je to matematika ... nešto ... funckija ... nešto). Pogledajte ovaj post za više.

Takođe je moguće kombinovati više transformacija definišući ih pod jednom transformacijom.

 div {
     transformisati: rotirati (90 stepeni) skalu (2) translateI (-50%) translateKs (50%);
 }

Najpopularniji efekat za koji se ovo svojstvo koristi u poslednje vreme je rotiranje navigacionih, društvenih i drugih informacija uglavnom na levoj strani i njihovo uspravljanje. Za oba primera dole se koristi svojstvo transform: rotate(-90deg).

3D Transformacije

Vrednosti 2D svojstava rotate, translate, scale i matrix imaju paralelne 3D vrednosti sa dodanom z-osom. Dodatno 3D svojstvo je perspective koja definiše perspektivni prikaz za 3D transformisani element. Perspective koristi jednu vrednost koja definiše koliko se element nalazi od pogleda.

rotate3d(x,y,z,angle),
translate3d(x,y,z),
scale3d(x,y,z),
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n),
perspective(n).

Verujem da su svi oni zaista samoobjašnjivi nakon što smo razumeli 2D opcije.

Tranzicija + Transformacija

Svojstvo transform koristi se za definisanje prelaza između dva stanja elementa. Sa transition čini moćan par, kao što je pomenuto na početku.

 .box {
     ...
     background-color: #0000FF;
     -webkit-transition:background-color 2s, -webkit-transform 2s;
     transition:background-color 2s, transform 2s;
}
.box:hover {
     background-color: #FFCCCC;
     -webkit-transform: rotate(180deg);
     transform: rotate(180deg);
}

Ovakva kombinacija je najčešća upotreba i svojstva transform i transition. Važno je zapamtiti da tranziciju u prvom stanju definišete sa transform kao vrednost i da definišete transformaciju u drugom stanju.

Završna reč

Protresite te svoje prave elemente!

Pretplatite se za još jedan e-mail u sredu (i znanje i bla bla bla).