Cu proprietatea CSS transform se poate modifica forma, marimea si pozitia elementelor HTML.
Se pot transforma elementele HTML in plan 2D sau 3D.
- Sintaxa:
transform: metoda(valori);- Acest tutorial prezinta metodele de transformare in plan 2D: translate(), rotate(), scale(), skew() .
transform: translate(X, Y);Exemplu. Cand utilizatorul plaseaza cursorul mouse-ului pe un anumit Div, ii muta pozitia cu 20 pixeli de la stanga si 15 pixeli din partea de sus.
<style type="text/css"> #idv { width:90px; height:90px; background:#b0b1fe; font-size:17px; } #idv:hover { transform: translate(20px, 15px); -ms-transform: translate(20px, 15px); /* IE 9 */ -webkit-transform: translate(20px, 15px); /* Safari si Chrome */ -o-transform: translate(20px, 15px); /* Opera */ -moz-transform: translate(20px, 15px); /* Firefox */ } </style> <div id="idv">Pozitionati mouse-ul aici.</div>
transform: rotate(grade);Exemplu. Roteste element cu 60 grade in sensul orelor de ceas.
<style type="text/css"> #idv2 { width:90px; height:90px; background:#b0b1fe; font-size:17px; } #idv2:hover { transform: rotate(60deg); -ms-transform: rotate(60deg); /* IE 9 */ -webkit-transform: rotate(60deg); /* Safari si Chrome */ -o-transform: rotate(60deg); /* Opera */ -moz-transform: rotate(60deg); /* Firefox */ } </style> <div id="idv2">Pozitionati mouse-ul aici.</div>
transform: scale(Lungime, Inaltime);- Valorile pentru Lungime si Inaltime sunt in procente. De exemplu, 1.5 inseamna 150% din marimea originala.
<style type="text/css"> #idv3 { width:90px; height:90px; background:#b0b1fe; font-size:17px; } #idv3:hover { transform: scale(2, 1.5); -ms-transform: scale(2, 1.5); /* IE 9 */ -webkit-transform: scale(2, 1.5); /* Safari si Chrome */ -o-transform: scale(2, 1.5); /* Opera */ -moz-transform: scale(2, 1.5); /* Firefox */ } </style> <div id="idv3">Pozitionati mouse-ul aici.</div>
transform: skew(Xdeg, Ydeg);Exemplu. Distorsioneaza elementul 20 grade pe lungime (axa-X) si 25 grade pe verticala (axa-Y).
<style type="text/css"> #idv4 { width:160px; height:90px; background:#abcdfe; font-size:18px; transform: skew(20deg, 25deg); -ms-transform: skew(20deg, 25deg); /* IE 9 */ -webkit-transform: skew(20deg, 25deg); /* Safari si Chrome */ -o-transform: skew(20deg, 25deg); /* Opera */ -moz-transform: skew(20deg, 25deg); /* Firefox */ } </style> <div id="idv4">www.discant.ro</div>
transform: translate(X, Y) rotate(grade) scale(Lungime, Inaltime) skew(Xdeg, Ydeg);- Puteti adauga doar acele metode pe care doriti sa le folositi in transformare.
<style type="text/css"> #idv5 { width:90px; height:90px; background:#00da01; font-size:17px; transform: translate(50px, 25px) rotate(-20deg) scale(2, 1.5) skew(15deg, 20deg); -ms-transform: translate(50px, 25px) rotate(-20deg) scale(2, 1.5) skew(15deg, 20deg); /* IE 9 */ -webkit-transform: translate(50px, 25px) rotate(-20deg) scale(2, 1.5) skew(15deg, 20deg); /* Safari si Chrome */ -o-transform: translate(50px, 25px) rotate(-20deg) scale(2, 1.5) skew(15deg, 20deg); /* Opera */ -moz-transform: translate(50px, 25px) rotate(-20deg) scale(2, 1.5) skew(15deg, 20deg); /* Firefox */ } </style> <div id="idv5">Continut oarecare...</div>Demo: