Introducere în Web Development

În locul poziționării relative, uneori putem folosi transformări, prin proprietatea transform.

Această proprietate, însă, are și alte funcționalități interesante. Unele pe care nici nu le vom acoperi în acest curs, dar te încurajez să arunci o privire la pagina MDN legată de funcții de transformare pentru a vedea ce altceva se mai poate face.

Elementele transformate nu vor afecta alte elemente. Browserul va păstra locul și dimensiunile inițiale (dacă nu ar avea transformări).

Funcții

Translatări

Putem să mutăm un element pe orizontală (Axa X) folosind:

                    transform: translateX(2ch);
                

Această funcție primește ca parametru cât vrem să mutam elementul. În locul inițial al elementului, va rămâne spațiu gol. Se pot folosi și procente, unde 100% reprezintă lățimea elementului.

Dacă vrem să mutăm spre stânga, vom folosi valori negative.

În mod similar, dacă vrem să mutăm elementele pe verticală (Axa Y), folosim:

                    transform: translateY(3rem);
                

Sau putem să le combinăm:

                    transform: translateX(50%) translateY(-50%);

/* Aceste două versiuni fac exact același lucru */
transform: translate(50%,-50%);
                

Scalare

Scalarea unui element înseamnă modificarea dimensiunilor fără a afecta alte elemente.

Se pot folosi procente sau numere fracționare.
100% respectiv 1 reprezintă dimensiunea inițială.

                    transform: scale(50%);
transform: scale(0.5);
                

Există funcții și pentru scalare individuală pe cele două axe X (orizontal) și Y (vertical):

                    transform: scaleX(50%) scaleY(60%);
                

Trebuie să ținem cont că în cazul în care avem scalări diferite elementul va fi distorsionat.

Rotire

Rotirea se face folosind:

                    transform: rotate(180deg);
transform: rotate(0.5turn);
                

Ca parametru, putem folosi grade geometrice (deg) sau unitatea turn, inclusiv valori negative.

Combinarea transformărilor

Se pot combina funcțiile de transformare. Toate funcțiile de transformare dorite se vor pune ca valoare a proprietății transform, separate prin spațiu.

                    transform: scale(50%) translate(1rem, -3rem);
                

Originea transformării

Dacă nu setăm altceva, transformările se fac în jurul centrului elementului.

Cum ne-a obișnuit deja CSS, putem să controlăm și acest aspect folosind transform-origin.

Se pot seta valori fixe, folosind unități de măsură, care vor fi calculate de la colțul din stânga-sus al elementului:

                    transform-origin: 10px 20px;
                

Valorile de mai sus înseamnă că se setează centrul transformării la 10px de marginea de sus a elementului pe orizontală, și 20px de marginea din stânga pe verticală.

Putem folosi și procente, unde 100% înseamnă dimensiunile înainte de transformare.

Nu în ultimul rând, putem folosi cuvinte cheie: center, top, bottom, left, right.
Un mare avantaj al cuvintelor cheie este că nu mai contează ordinea.

Dacă nu dăm o origine, dar o dăm pe cealaltă, cea care lipsește va fi considerată center.

                    transform-origin: 10px; /* x: 10px y: center */
transform-origin: top; /* x: center y: top */
transform-origin: right; /* x: right y: center */