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() .

Metoda translate()

Metoda translate() muta elementul de la pozitia initiala, in functie de parametri dati pentru pozitionare de la Stanga (axa-X) si de Sus (axa-Y) .
- Sintaxa:
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>
Demo:
Pozitionati mouse-ul aici.

CSS rotate()

Metoda rotate() roteste elementul HTML, in sensul orelor de ceas daca valoarea e pozitiva, in sens invers orelor de ceas daca valoarea e negativa.
- Sintaxa:
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>
Demo:
Pozitionati mouse-ul aici.

Metoda scale()

Metoda scale() mareste sau micsoreaza marimea elementului HTML (inclusiv continutul din el), in functie de parametri pentru Lungime (axa-X) si Inaltime (axa-Y).
- Sintaxa:
transform: scale(Lungime, Inaltime);
- Valorile pentru Lungime si Inaltime sunt in procente. De exemplu, 1.5 inseamna 150% din marimea originala.

Exemplu. Transforma lungimea sa fie de 2 ori marimea originala, si inaltimea 1.5 ori inaltimea 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>
Demo:
Pozitionati mouse-ul aici.

CSS skew()

Metoda skew() distorsioneaza elementul HTML pe orizontala (axa-X) si verticala (axa-Y), incluzand si continutul din el.
- Sintaxa:
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>
Demo:
//coursesweb.net


• Cele 4 metode de transformare pot fi utilizate si intr-o singura definitie transform, separate prin spatiu.
- Sintaxa:
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.

Exemplu, muta elementul cu 50 pixeli de la stanga si 25 pixeli din partea de sus, il roteste cu 20 grade in sens invers orelor de ceas, transforma lungimea de 2 ori cea originala si inaltimea 1.5 ori, distorsioneaza elementul cu 15 grade pe orizontala si 20 grade pe verticala.
<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>
Demo:
Viata este Fericire.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag defineste zona de click intr-o harta creata dintr-o imagine?
<map> <img> <area>
<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>
Ce proprietate CSS indica ce sa se intample cand continutul unui element depaseste dimensiunile lui?
display overflow position
#id {
  overflow: auto;
}
Clic pe evenimentul care este declansat cand mouse-ul e deasupra unui obiect.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Sa ai Viata Buna");
}
Indicati variabila PHP ce contine datele adaugate in adresa URL, dupa caracterul "?".
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Clic pe pronumele reflexiv care e potrivit in propozitia: "Marc is the boy ... won the prize".
who which whoever
Marc is the boy who won the prize.
- Marc e baiatul care a castigat premiul.
Clic pe pronumele reflexiv care e potrivit in propozitia: "Voy a ver al pintor de ... les hablé ayer".
que quien cuyo
Voy a ver al pintor de quien les hablé ayer.
- Ma duc sa vad pictorul despre care ti-am vorbit ieri.
CSS3 Transformari 2D

Last accessed pages

  1. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (27825)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (40194)
  3. Trecutul simplu si continuu - Past Tense Simple and Continuous (28303)
  4. Data si Ora in engleza - Date and Time (6142)
  5. Adverbele in limba engleza - Adverbs (11233)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2881)
  2. Conditional IF in Limba Engleza - Fraze Conditionale (2194)
  3. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1962)
  4. Curs HTML gratuit Tutoriale HTML5 (1959)
  5. Creare si editare pagini HTML (1476)