Cauta rapid aici ↑

CSS 3 -- TRANSFORMARE 3D

Proprietatea transform -- partea a 2-a

In pagina de transformare 2D v-am vorbit despre cateva valorii foarte utile cu care putem transforma un element in 2D . Proprietatea transform poate face mai mult de atat si daca ne dorim putem face ca un element sa se roteasca pe axele X si Y . Pentru a realiza aceste lucruri trebuiesc folosite urmatoarele valorii :

  • rotateX()
  • rotateY()

Valoarea rotateX()

La fel ca si la valoarea rotate() si aici vom avea aceleasi reguli. Valoarea rotateX() roteste elementul pe axa X . Exemplu → { transform:rotateX(360deg); }

Valoarea rotateY()

La fel ca si la valoarea rotate() si aici vom avea aceleasi reguli. Valoarea rotateY() roteste elementul pe axa Y . Exemplu → { transform:rotateY(360deg); }

Mai mult decat atat, putem face ca elementul nostru sa capete o rotatie de perspectiva , lasand impresia de rotatie 3D si pentru asta trebuie sa folosim urmatoarea proprietate pe div -ul in care sunt cele doua elemente .

Proprietatea perspective

Aceasta proprietate perspective face posibila ca valorile de rotatie pe axele X si Y de mai sus din proprietatea transform sa capete perspectiva si asa cum am spus aceasta proprietate trebuie folosita pe DIV -ul in care sunt elementele. Singura valoare acceptata pentru aceasta proprietate este in pixeli . O valoare mai mica de pixeli va face ca atunci cand se roteste elementul, acesta sa se alungeasca excesiv iar o valoare de cateva sute de pixeli va face ca elementul sa se roteasca la dimensiunea lui normala, iar o valoare de cateva mii de pixeli va face ca elementul nostru sa nu aibe perspectiva , ca si cum nu i-am fi dat sa se roteasca in perspectiva .