Matricea transformărilor

Mulți dezvoltatori web, datorită neînțelegerilor, nu folosesc matricea pentru transformările CSS, folosind la rândul lor cele mai simple funcții de transformare, în timp ce matricea transformărilor are posibilități largi. Să ne dăm seama cum să-l folosim în practică.

Matricea transformărilor este destinată calculării noilor coordonate ale unui element pentru transformarea sa ulterioară. În acest caz, condiția: linia trebuie să fie întotdeauna paralel, astfel încât rotația admisibilă de transformare, la scară, oblic, și de a schimba poziția, dar nu de perspectiva, sau ceva similar. Figura de mai jos arată transformările posibile și imposibile realizate folosind matrice de transformare.

Deci nu poți să faci asta

Matricea însăși are o dimensiune de 3x3 și este în general scrisă după cum urmează:

Uneori, pentru simplitate, a treia coloană este omisă, deoarece nu afectează rezultatul final. Noile coordonate ale fiecărui punct al elementului după transformare utilizând o matrice sunt calculate prin următoarea formulă:

Rolul fiecărui coeficient de matrice este prezentat în tabelul de mai jos:

Schimbați scara orizontală. O valoare mai mare decât 1 extinde elementul, mai puțin de 1 - comprimă.

Înclinare orizontală. O valoare pozitivă se înclină spre stânga, o valoare negativă la dreapta.

Se înclină de-a lungul verticalei. Valoarea pozitivă se înclină, negativul în jos.

Schimbați scala verticală. O valoare mai mare decât 1 extinde elementul, mai puțin de 1 - comprimă.

Decalarea orizontală în pixeli. O valoare pozitivă schimbă elementul spre dreapta cu un anumit număr de pixeli, valoarea negativă spre stânga.

Decalarea verticală în pixeli. Dacă valoarea este pozitivă, elementul este redus cu un număr specific de pixeli în jos. Dacă valoarea este negativă, mergeți în sus.

Pentru claritate, puteți verifica efectul fiecărui coeficient asupra acestui formular:

Matrice transformări în browsere

Pentru a transforma un element, este utilizată transformarea stilului CSS. care ia ca valoare matricea de cuvinte cheie. în care sunt enumerate coeficienții matricei noastre de transformare.

Fiți atenți la ordinea coeficienților, aceasta este de o importanță fundamentală!

Ca de obicei, diferite browsere cu proprietăți CSS3 funcționează în felul lor, înțelegându-le doar cu prefixe, deci trebuie să repetați o linie de mai multe ori.

Dacă aveți nevoie de suport pentru Internet Explorer înainte de versiunea 9.0, va trebui, de asemenea, să utilizați proprietatea filtrului nestandard.

Matricea identității

Dacă coeficienții a și d sunt egali cu 1 în matrice și elementele rămase ale matricei sunt zero, atunci o astfel de matrice se numește matricea unității. Această matrice este utilizată în mod implicit, deoarece nu duce la transformarea elementului. Prin urmare, dacă trebuie să faceți doar un fel de transformare, luați ca bază o matrice de identitate.

scalare

Pentru a mări dimensiunea elementului, să zicem, de două ori pe orizontală, coeficientul a ar trebui să fie egal cu 2, iar coeficienții rămași ar trebui lăsați ca în matricea unității.

Considerăm noi coordonate:

x '= 2 * x + 0 * y + 0
y '= 0 * x + 1 * y + 0

Pentru a reflecta elementul pe orizontală, setați a = -1. pe verticală d = -1. sau aceste valori simultane pentru reflecție atât orizontal cât și vertical.

Pentru pantă, coeficienții b și c corespund. care afectează aspectul elementului. Să setăm b = 1 și să vedem ce fel de transformări sunt produse.

x '= 1 * x + 0 * y + 0
y '= 1 * x + 1 * y + 0

Astfel, numai modificările coordonatei y. care crește cu valoarea lui x. care duce la panta elementului. În exemplul de mai jos, avem o valoare negativă pentru coeficientul b pentru a înclina elementul spre dreapta.

Rotația este o combinație de scalare și de smoală, dar pentru a menține elementul original, proporțiile de conversie trebuie să se supună strict de calcul folosind sinus și cosinus.

Turnul se produce în sensul acelor de ceasornic, α specifică unghiul de rotație în grade.

deplasare

Factorul tx este responsabil pentru deplasarea orizontală a elementului. dar pe verticală. Valoarea este numărul de pixeli, Firefox, în plus, singurul browser care acceptă alte unități, de exemplu em.

Mișcarea însăși este rar utilizată datorită faptului că există multe alte instrumente în CSS pentru aceasta, cum ar fi poziționarea sau indentarea.

Rezumă

După cum puteți vedea, matricea transformărilor CSS este un instrument simplu și eficient de transformare în CSS. Desigur, acestea nu ar trebui să fie întotdeauna folosite (de exemplu, există o funcție de rotire gata de a se roti). Cu toate acestea, pentru unele cazuri, cum ar fi reflectarea elementelor, matricea transformărilor este pur și simplu de neînlocuit.