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>
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
#id { font-style: italic; }
$(document).ready(function() { $(".a_class").click(function(){ $(this).hide("slow"); }); });
function fname($a, $b) { echo $a * $b; }
I have been walking for 5 hours. - Merg pe jos de 5 ore.
Yo fui entrenador. - Am fost antrenor.