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>
<div>Web Programming and Development</div>
h2 {
text-decoration: underline;
}function someFunction() { alert("CoursesWeb.net"); }
setTimeout("someFunction()", 2000);$food =["fruits" =>["banana", "mar"), "veggie" =>["ceapa", "rosie")); $nr_food = count($food, 1); echo $nr_food; // 6
The child will haven't played by Sunday. - Copilul nu s-ar fi jucat pana duminica.
Él no habrá contado el cuento. - El nu ar fi spus povestea.