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="image.jpg" usemap="#map1"> <map name="map1"> <area shape="rect" coords="9, 120, 56, 149" href="#"> <area shape="rect" coords="100, 200, 156, 249" href="#"> </map>
#id {
overflow: auto;
}document.getElementById("id").onmouseover = function(){
document.write("Sa ai Viata Buna");
}if(isset($_GET["id"])) {
echo $_GET["id"];
}Marc is the boy who won the prize. - Marc e baiatul care a castigat premiul.
Voy a ver al pintor de quien les hablé ayer. - Ma duc sa vad pictorul despre care ti-am vorbit ieri.