Tranzitii si transformari

Transformarile rotesc, redimensioneaza, translateaza si distorsioneaza elementele. Tranzitiile definesc un comportament pentru a trece de la o stare la alta(w3.org/tr/css3-transitions). Iar animatiile folosesc cadre cheie pentru a modifica multiple proprietati de-a lungul unui interval de timp(w3.org/tr/css3-animations).

Tranzitii

transition: <proprietate><durata><functia de atenuare><durata>

Exemplu: cand opacitatea se modifica(de exemplu, la hover de la 0,5 la 1 sau inapoi), face tranzitia de la o valoare la urmatoarea, in mod liniar, pe parcursul a 50 ms:

-webkit-transition: opacity 50ms linear;

-moz-transition: opacity 50ms linear;

Transformari

transform: <functia de transforamre>[<functia de transformare>]

Aveti la dispozitie un numar de functii de transformare, cele mai folositoare fiind:

Scale: scaleX(),scaleY(),scaleZ(), varianta prescurtata scale(x,y), scale3d(x,y,z)

Rotate:rotateX(),rotateY(),rotateZ(), varianta prescurtata: rotate(x,y), rotate3d(x,y,z)

Skew:skewX(),skewY(), varianta prescurtata skew(x,y)

Translate:translateX(),translateY(),translateZ(), varianta prescurtata: translate(x,y), translate3d(x,y,z)

Exemple: -webkit-transform:rotateX(-100deg) rotateY(200deg);

-webkit-transform: translateX(10px) rotate3d(200deg, 20 deg, 5deg);

Leave a reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>