O privire în transformările CSS3 2D
Modul de transformare este un plus extraordinar în CSS3, este nevoie de modul în care manipulăm elementele de pe un site web la nivelul următor.
Există câteva experimente care mă uimi cu adevărat, exemple precum acesta. Cu toate acestea, nu vom construi ceva asemănător unei pictograme care să se transforme într-un fel într-un Autobot, deoarece poate fi copleșitoare și nu poate fi utilizată în viața reală.
În schimb, de data aceasta, vom reveni și vom revizui elementele de bază ale transformărilor CSS3 2D pentru a vedea cum funcționează la un nivel fundamental.
Sintaxa
Modulul Transformări CSS3 ne permite în principiu să transformăm un element într-o anumită măsură, cum ar fi traducerea, scalarea, rotirea și înclinarea.
Sintaxa oficială este transformare: metoda (valoare). Cu toate acestea, ca orice alte adăugări extraordinare ale CSS3 încă în stadii incipiente, browserele actuale necesită încă versiunea de sintaxă pentru a rula transformările. Deci, sintaxa completă s-ar dovedi așa:
transformare: metoda (valoare); / * W3C Sintaxa oficială * / -o-transform: metoda (valoare); / * Opera 10,5+ * / -ms-transform: metoda (valoare); / * Internet Explorer 9.0+ * / -moz-transform: metoda (valoare); / * Firefox 3.6+ * / -webkit-transform: metoda (valoare); / * Chrome / Safari 3.2+ * /
De asemenea, metoda la care ne referim mai sus este transformare funcții, care ar putea fi înlocuită cu una dintre următoarele: Traduceți(), scară(), roti() sau oblic().
Valoarea
Cea mai mare parte a metodei va corespunde valorii Axa X și Axa Y. Dacă vă aduceți aminte de sistemul de coordonate carteziene din clasa matematică din liceu, principiul de bază este destul de similar, axa X reprezintă orizontală iar axa Y reprezintă vertical linia.
Cu excepția rotațiilor. rotație va folosi coordonate polare care este exprimată în grade care variază de la 0 la 360.
Valorile pentru toate metodele pot fi negative sau pozitive. Luați totuși o notă, deoarece pagina web este citită secvențial de sus în jos, ceea ce face ca axa Y din rețea să funcționeze opusă principiului original al coordonatelor carteziene. Aceasta înseamnă că atunci când adăugați o valoare negativă Axa Y, se va muta în partea superioară.
Folosind Transformările
Acum, să vedem următoarea demonstrație de bază pentru a vedea Transformarea în acțiune.
Eu traduc
Nu fiți înnegriți cu termenul Traduceți, nu va traduce limba străină. Traduceți aici este de fapt o metodă pentru deplasarea elementelor într-o anumită direcție.
Metoda conține două valori; X și Y. Valoarea X așa cum am arătat mai sus, va lua elementul pe orizontală; la stânga sau la dreapta, in timp ce Y valoarea îl va lua vertical în partea de jos sau în partea de sus.
Acum, să vedem câteva demonstrații simple de mai jos:
div lățime: 100px; înălțime: 100px; transformă: traduce (100px, 250px);
Fragmentul de mai sus va muta elementul pentru 100 de pixeli la dreapta și 250 de pixeli în partea de jos.
div lățime: 100px; înălțime: 100px; transformă: traduce (100px, 0);
Fragmentul de mai sus va muta elementul în dreapta spre dreapta pentru 100 de pixeli, pentru că vom zeroarea axei Y. Apoi, dacă vrem să mutăm elementul spre stânga, trebuie doar să setăm axa X în negativ, după cum urmează:
div lățime: 100px; înălțime: 100px; transformă: traduce (-100px, 0);
- Traduceți demo
Alternativ, suntem capabili să mutăm elementul într-o singură direcție cu aceste metode individuale; translateX () și translateY (), diferența este că fiecare din aceste metode acceptă o singură valoare.
Deci, practic, vorbind transforma: traduce (-100px, 0) este, de asemenea, egal cu transformare: translateX (-100px).
II - Scala
scară ne permite măriți sau micșorați elementele de la dimensiunea reală. Valoarea scării este aceeași cu cea a scalei Traduceți mai sus, conține și X și Y. Singura diferență este că nu specificăm unitatea. Iată un exemplu:
div lățime: 100px; înălțime: 100px; transformă: scala (1,5);
Exemplul de mai sus va mări div 1,5 sau 150% din dimensiunea reală, și din moment ce o scarăm în mod egal pentru ambele direcții X și Y, trebuie doar să o spunem într-o singură valoare. De asemenea, puteți să o declarați în acest fel transformare: scală (1,5,1,5); dacă doriți să obțineți mai multe detalii, va face același lucru.
În plus, dacă vrem să reducem elementul, vom folosi în mod specific o valoare de la 0.999 până la absolut 0, cum ar fi exemplul de mai jos, care va reduce dimensiunea lui div pentru 50% sau jumătate:
div lățime: 100px; înălțime: 100px; transformare: scala (0,5);
Dar, fiți atenți, dacă setați valoarea să fie absolută “0” div vor dispărea, deci, dacă nu aveți un motiv valid pentru a face acest lucru, nu aș recomanda să o faceți.
- Scalare demo
III - Rotiți
Așa cum am menționat mai devreme în acest post, roti metoda folosește coordonate polare, deci valoarea este indicată în grade. Iată două exemple
Fragmentul de mai jos va roti div 30 grade în sensul acelor de ceasornic.
div lățime: 100px; înălțime: 100px; transforma: roti (30deg);
O valoare negativă, așa cum este ilustrată în exemplul de mai jos, va roti div în direcția opusă (în sens contrar acelor de ceasornic) în același grad.
div lățime: 100px; înălțime: 100px; transforma: roti (-30deg);
- "Rotiți" demo
IV - Skew
oblic ne permite să creăm un fel de paralelogramă. De asemenea, conține două valori ale axelor X și Y. Cu toate acestea, valoarea în sine este indicată în grade, în loc de măsurători lineare pe care le folosim pentru scară sau Traduceți metodă. Iată un exemplu:
div lățime: 200px; înălțime: 100px; transformare: oblic (30deg, 10deg);
- Demonstrație "Skew"
V - Metodă multiplă
transforma proprietatea nu se limitează la o singură metodă, de fapt putem include mai multe metode în declarații unice, cum ar fi:
div lățime: 100px; înălțime: 100px; transformă: translateX (100px) roti (45deg);
Fragmentul de mai sus va muta elementul de 100px spre dreapta și, în același timp, va roti și 45 de grade.
Metoda "Mai multe metode".
Transformare Origine
transfrom origine - așa cum sugerează și numele - este folosit pentru a controla punctul de plecare al transformării. Dacă nu declarăm explicit această proprietate cu următoarea sintaxă transformare-origine: X Y;, atunci browserul va lua valoarea implicită care este de 50% pentru X și 50% pentru Y.
Acum, dacă specificăm transformare origine la 0 (X) 0 (Y), transformarea va începe la stânga sus.
Din nou, toate browserele au nevoie de versiunea prefix pentru a apela această proprietate. Deci, aici este versiunea completă pentru a vă asigura că funcționează în cele mai multe browsere actuale:
-webkit-transform-origin: X Y; -moz-transform-origine: X Y; -o-transform-origine: X Y; -ms-transform-origine: X Y; transformare-origine: X Y;
- Demo "Transformare-origine"
Concluzie
Am parcurs toate cele patru metode esențiale de transformare; traduce, scala, roti și înclina
Cu toate acestea, după cum sa menționat, acest modul este încă în stadiu incipient, deci dacă veți aplica aceste metode în următorul site, asigurați-vă că acesta se degradează grațios pentru browserele incompatibile (nu mă refer la IE6 aici).
În cele din urmă, puteți vedea toate demo-urile sau puteți descărca sursa din următoarele link-uri.
- Demo
- Descărcați sursa
