Funcțiile matrice - matrix () și matrix3d () sunt cele două cele mai nedumerite din punct de vedere al înțelegerii gizmosului în transformările CSS3. În majoritatea cazurilor, pentru simplitate și claritate, veți folosi funcții precum rotate () și skewY (). Dar în spatele fiecărei transformări se află o matrice echivalentă. Este util să înțelegeți cel puțin cum funcționează, așa că haideți să aruncăm o privire.
În acest articol voi acoperi atât matricele 3 și 3, utilizate pentru transformări bidimensionale, cât și matricele 4 până la 4 pentru cele tridimensionale.
În acest articol, folosesc și versiuni neconfigurate ale proprietăților transformate. În practică, aceste proprietăți sunt încă experimentale și se pot schimba. Până când vor fi aprobați în final, adăugați o versiune cu un prefix (de ex. -o-transform) la codul dvs. CSS.
Ce este o matrice?
Matrix - un termen matematic rece pentru o matrice dreptunghiular de numere, simboluri sau expresii (a se vedea figura 1 ..). Matricile au multe aplicații matematice și științifice. Fizică, de exemplu, utilizarea lor în studiul mecanicii cuantice. În domeniul graficii computerizate, ele sunt folosite pentru lucruri ca - brusc! - transformări liniare și proiecții de imagini tridimensionale pe un ecran bidimensional. Aceasta este ceea ce face ca funcțiile de matrice: matrice () ne permite sa cream o transformare liniară, și matrix3d () vă permite să creați iluzia de tridimensionalitate în două dimensiuni folosind CSS.
Fig. 1. Exemplu de matrice
Nu vom merge departe în profunzimea algebrei avansate. Ar trebui să cunoașteți sistemul de coordonate carteziene. De asemenea, puteți reîmprospăta în memorie cum să înmulțiți matrice și vectori (sau să utilizați calculatorul de tipul Bluebit.gr oferit).
Un punct important de înțeles este faptul că transformarea înmulțește matricea cu coordonatele punctului (sau punctelor), exprimate ca vector.
Transformări și sisteme de coordonate
Atunci când o transformare este aplicată unui obiect, acesta creează un sistem local de coordonate. În mod implicit, originea coordonatelor locale - punctul (0,0) - se află în centrul obiectului, sau 50% din lățime și 50% din înălțime (Figura 2).
Fig.2. Sistem de coordonate local.
Putem schimba originea sistemului local de coordonate prin potrivirea proprietății de transformare-origine (Figura 3). Transformarea-origine. 50px 70px, de exemplu, plasează originea 50 de pixeli de la marginea din stânga a obiectului și de 70 de pixeli din partea de sus. Transformările fiecărui punct din sistemul de coordonate local al obiectului sunt calculate în raport cu acest punct.
Fig. 3. Sistemul de coordonate local, începând de la punctul (50px, 70px). Se afișează și punctul (30px, 30px).
Browserele fac aceste calcule pentru dvs. de fiecare dată când aplicați o transformare. Trebuie doar să știți ce argumente vă pot ajuta să obțineți efectul dorit.
Calculul transformării: matematica matricelor și a vectorilor
Să analizăm un exemplu folosind matricea 3 la 3 pentru a calcula o transformare bidimensională (Figura 4). Matricea 4x4 folosită pentru transformările 3D funcționează în același mod, cu numere suplimentare pentru axa Z suplimentară.
Fig. 4. Matricea transformării CSS bidimensionale
Putem scrie acest lucru ca transforma: matrice (a, b, c, d, e, f), în cazul în care literele de la A la f - numerele determinate de tipul de transformare pe care dorim să se aplice. Matricele sunt rețete pentru tipurile de transformări pe care vrem să le aplicăm. Acest lucru va deveni puțin mai clar atunci când analizăm câteva exemple.
Atunci când aplicăm o transformare bidimensională, browserul înmulțește matricea cu vectorul [x, y, 1]. Valorile lui x și y sunt coordonatele unui anumit punct din spațiul local de coordonate.
Pentru a găsi coordonatele după transformare, înmulțim fiecare element al fiecărui rând al matricei cu șirul vectorial corespunzător. Apoi adăugați lucrarea (Figura 5).
Fig. 5. Înmulțirea unei matrice cu un vector
Știu că arată o mulțime de numere și litere fără sens. Dar, după cum sa menționat mai sus, fiecare tip de transformare are matrice proprie. Fig. 6 prezintă matricea pentru transformarea forfecării.
Fig. 6. Matricea de schimbare
Valorile lui tx și ty sunt valorile la care originea trebuie mutată. Putem reprezenta și acest lucru cu ajutorul vectorului [1 0 0 1 tx ty]. Acest vector servește ca argument pentru funcția matrice (). după cum se arată mai jos.
Fig. 7. Un obiect cu coordonate globale (0,0).
Vom muta acest obiect cu 150 de pixeli de-a lungul axelor x și y, folosind originea transformării implicite. Mai jos este CSS pentru această transformare.
Apropo, aceasta este echivalentă cu transformarea: traduceți (150px, 150px). Să calculam rezultatul acestei transformări pentru un punct cu coordonate (220px, 220px) (figura 8).
Fig. 8. Calcularea transformării forfecării.
Fig. 9. Obiectul nostru după aplicarea transformării.
Matricea de forfecare este un caz special. Este ca aditiv. deci este multiplicativ. O soluție mai simplă ar fi pur și simplu să adăugăm valoarea de schimbare la coordonatele x și y ale punctului nostru.
Calcularea transformării tridimensionale
Mai sus am considerat matricea de transfer 3 cu 3. Să luăm un alt exemplu, folosind o matrice de 4 la 4 pentru scalare (Figura 10).
Fig. 10. Matricea 4 cu 4 pentru scalare.
Aici sx. sy și sz reprezintă factorii de scalare pentru fiecare axă. Cu funcția de matrix3d va arata astfel: transforma: matrix3d (sx, 0, 0, 0, 0, SY, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1).
Vom continua cu același obiect ca înainte. Scade scara de-a lungul axelor x și y folosind funcția matrix3d (). după cum se arată mai jos.
Aceasta este echivalentă cu transformarea: scale3d (0.8, 0.5, 1). Așa cum am scară numai în x și y (primirea 2D-transformare), am putea folosi, de asemenea transformare: matricea (.8, 0, 0. 5, 0, 0) sau scală (.8, .5). Rezultatul transformării este prezentat în Fig. 11.
Fig. Obiectul 300 cu 300 de pixeli după aplicarea transformării scalării.
(. Figura 12) Dacă înmulțim această matrice pentru a coordona vectorul [150,150,1], obținem aceste noi coordonate punctul nostru: (120,75,1).
Fig. 12: Calculul transformării scalării.
Unde se obțin valorile matricelor
Valorile matricei pentru fiecare funcție de transformare sunt date în specificația Scalable Vector Graphics. și în specificația CSS Transforms.
Transformări compozite folosind matrice
În cele din urmă, să aruncăm o privire asupra modului de a crea o transformare compusă - o transformare echivalentă cu aplicarea simultană a mai multor funcții de transformare. Din motive de simplitate, ne limităm la două dimensiuni. Aceasta înseamnă că vom folosi matricea de transformare 3 cu 3 și funcția matrice (). Cu această transformare, ne rotim obiectul cu 45 ° și măresc scara de 1,5 ori față de dimensiunea originală.
matricea de rotație, exprimată ca un vector - [cos (a) sin (a) -sin (a) cos (a) 0 0] unde a - unghi. Necesitatea unei matrice scalarea [sx sy 0 0 0 0]. Pentru a le combina, se înmulțește matricea de rotație prin scalarea matrice, așa cum se arată în Fig. 13 (sinus și cosinus de 45 ° sunt ambele 0.7071).
Fig. 13: Calculul matricei unei transformări compuse.
În CSS, aceasta ar arăta astfel: transformă: matrice (1.0606, 1.0606, -1.0606, 1.0606, 0, 1). Fig. 14 prezintă rezultatul după aplicarea transformării.
Fig. 14: Obiectul nostru este 300 cu 300 de pixeli după scalare și rotire.
Fig. 15. Aplicarea transformării.
Noile coordonate ale punctului nostru vor fi (199.393px, 432.725px).
P.S. Și asta poate fi interesant:
Au trecut mai puțin de șase luni de la ultima modificare a fluxului de lucru al W3C, deoarece conducerea consorțiului a primit o propunere pentru a aplica în cele din urmă acest nou proces. Și să scrieți specificațiile HTML irelevante în muzeu, astfel încât să nu confundă dezvoltatorii, "pretinzând" că sunt relevanți.
Un alt modul CSS, despre care am vorbit, a ajuns într-un mod imperceptibil la starea cu care W3C sfătuiește să înceapă utilizarea zilnică a produselor noi. Proprietatea conține vă permite să restricționați modificările la arborele de randare, să redenumiți casetele CSS și să le redimensionați în interiorul elementului. Prin urmare, este atât de important ...
MAI MULT
De la Paris (foto), care a trecut recent CSS intalnire de lucru de grup, a sosit știri amuzant: Proprietăți grilă-rând-gap și grila coloana-decalaj, precum și reducerea grilă decalaj ...
Articole similare
Trimiteți-le prietenilor: