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()
.translate()
muta elementul de la pozitia initiala, in functie de parametri dati pentru pozitionare de la Stanga (axa-X) si de Sus (axa-Y) .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> #idv { width:90px; height:90px; background:#b0b1fe; font-size:17px; } #idv:hover { transform: translate(20px, 15px); } </style> <div id="idv">Pozitionati mouse-ul aici.</div>
rotate()
roteste elementul HTML, in sensul orelor de ceas daca valoarea e pozitiva, in sens invers orelor de ceas daca valoarea e negativa.transform: rotate(grade);Exemplu. Roteste element cu 60 grade in sensul orelor de ceas.
<style> #idv2 { width:90px; height:90px; background:#b0b1fe; font-size:17px; } #idv2:hover { transform: rotate(60deg); } </style> <div id="idv2">Pozitionati mouse-ul aici.</div>
scale()
mareste sau micsoreaza marimea elementului HTML (inclusiv continutul din el), in functie de parametri pentru Lungime (axa-X) si Inaltime (axa-Y).transform: scale(Lungime, Inaltime);- Valorile pentru Lungime si Inaltime sunt in procente. De exemplu, 1.5 inseamna 150% din marimea originala.
<style> #idv3 { width:90px; height:90px; background:#b0b1fe; font-size:17px; margin:40px 0 0 50px; } #idv3:hover { transform: scale(2, 1.5); } </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> #idv4 { width:160px; height:90px; background:#abcdfe; font-size:18px; margin:40px 0 0 30px; transform: skew(20deg, 25deg); } </style> <div id="idv4">//coursesweb.net</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> #idv5 { width:90px; height:90px; background:#00da01; font-size:17px; margin:40px 0 0 30px; transform: translate(50px, 25px) rotate(-20deg) scale(2, 1.5) skew(15deg, 20deg); } </style> <div id="idv5">Viata este Fericire.</div>
<a href="http://coursesweb.net/" title="CoursesWeb.net">CoursesWeb.net</a>
h2 { font-family:"Calibri", sans-serif; }
var elm_list = document.querySelectorAll("div.cls"); var nr_elms = elm_list.length; // numar elemente selectate alert(nr_elms);
$arr =[1, 2, 3, 4); $arr_sum = array_sum($arr); echo $arr_sum; // 10
We studied English. - Noi am studiat engleza.
Yo digo siempre la verdad. - Eu spun mereu adevarul.