Et kig på CSS3 2D-transformationer
Det Transformationsmodul er en enorm tilføjelse i CSS3, det tager måden vi manipulerer elementer på en hjemmeside til næste niveau.
Der er nogle eksperimenter, der virkelig forbløffer mig, eksempler som denne. Men vi vil ikke opbygge noget som et CSS-eneste ikon, der på en eller anden måde kan transformere til en Autobot, da det kan være overvældende og ikke helt anvendeligt i det virkelige liv også.
I stedet vil denne gang vi træde tilbage og gennemgå det grundlæggende i CSS3 2D Transformations for at se, hvordan det fungerer på et grundlæggende niveau.
Syntaxen
CSS3 Transformations modulet giver os grundlæggende mulighed for at omdanne et element til en vis grad, såsom oversættelse, skalering, roterende og skævhed.
Den officielle syntaks er transformation: fremgangsmåden (værdi). Men ligesom alle andre CSS3 store tilføjelser, der stadig er i de tidlige stadier, har de nuværende browsere stadig brug for syntaksversionen til at køre transformationerne. Så den komplette syntaks vil vise sig sådan her:
transformere: metode (værdi); / * W3C Officiel syntaks * / -o-transform: metode (værdi); / * Opera 10.5+ * / -ms-transform: metode (værdi); / * Internet Explorer 9.0+ * / -moz-transform: metode (værdi); / * Firefox 3.6+ * / -webkit-transform: metode (værdi); / * Chrome / Safari 3.2+ * /
Også den metode, vi henviser til ovenfor, er transformation-funktioner, som kunne erstattes med et af følgende: Oversætte(), vægt(), rotere() eller skew ().
Værdien
Den meste af metodeens værdi svarer til X-aksen og Y-aksen. Hvis du husker det kartesiske koordinatsystem fra din matematik klasse i gymnasiet, er grundprincippet ret ens, X-aksen repræsenterer den vandret linje og Y-aksen repræsenterer lodret linje.
Bortset fra rotationer. Det rotation vil bruge polære koordinater som udtrykkes i grader, der spænder fra 0 til 360.
Værdierne for alle metoderne kan være både negative eller positive. Bare tag en note, da websiden læses sekventielt fra top til bund, hvilket gør Y-aksen på nettet til at arbejde modsat ud fra det oprindelige princip for kartesiske koordinater. Det betyder, at når du tilføjer en negativ værdi til Y-aksen, det vil flytte til toppen i stedet.
Brug af transformationerne
Lad os nu se følgende grundlæggende demonstration for at se Transformation in action.
Jeg oversætter
Må ikke være overskyet med udtrykket Oversætte, det vil ikke oversætte fremmedsprog. Det Oversætte her er faktisk en metode til at flytte elementer i en eller anden retning.
Metoden indeholder to værdier; x og Y. det X-værdi som vi påpegede ovenfor vil tage elementet vandret til venstre eller til højre, mens Y værdi vil tage det lodret til bunden eller til toppen.
Lad os nu se nogle enkle demonstrationer nedenfor:
div bredde: 100px; højde: 100px; transformere: translate (100px, 250px);
Udsnittet ovenfor vil flytte elementet til 100px til højre og 250px til bunden.
div bredde: 100px; højde: 100px; transformere: translate (100px, 0);
Udsnittet ovenfor vil flytte elementet lige til højre for 100px, fordi vi nulstiller Y-aksen. Så, hvis vi ønsker at flytte elementet til venstre, er vi kun nødt til at indstille X-aksen negativt, som følger:
div bredde: 100px; højde: 100px; transformere: translate (-100px, 0);
- "Oversæt" demo
Alternativt er vi i stand til at flytte elementet i en enkelt retning med disse individuelle metoder; translateX () og translateY (), forskellen er, at hver af disse metoder accepterer kun en værdi.
Så praktisk talt, den transformere: translate (-100px, 0) er ligeledes lig med transformere: translateX (-100px).
II - Skala
Det vægt metode giver os mulighed for forstørre eller reducere elementerne fra dens faktiske størrelse. Skalens værdi er den samme som Oversætte metode ovenfor, indeholder den også X og Y. Den eneste forskel er, at vi ikke angiver enheden. Her er et eksempel:
div bredde: 100px; højde: 100px; transformere: skala (1,5);
Ovennævnte eksempel vil forstørre div 1,5 eller 150% af dens faktiske størrelse, og da vi skalere det lige for både X og Y retningerne, er vi kun nødt til at erklære det i en værdi. Du kan også erklære det på denne måde transformere: skala (1,5,1,5); hvis du vil gå mere detaljer, det vil bare gøre det samme.
Desuden vil vi, hvis vi vil reducere elementet, specifikt anvende en værdi fra 0,999 til absolut 0, som eksemplet nedenfor, hvilket vil reducere størrelsen af div for 50% eller halvdelen:
div bredde: 100px; højde: 100px; transformere: skala (0,5);
Men vær forsigtig, hvis du sætter værdien til at være absolut “0” det div vil bare forsvinde, så medmindre du har en gyldig grund til at gøre det, vil jeg ikke anbefale at gøre det.
- "Skala" demo
III - Drej
Som vi tidligere nævnte i dette indlæg, rotere Metoden bruger polære koordinater, så værdien er angivet i grader. Her er to eksempler
Udsnittet nedenfor roterer div 30 grader med uret.
div bredde: 100px; højde: 100px; transformer: roter (30deg);
En negativ værdi, som illustreret i eksemplet nedenfor, vil rotere div i modsat retning (mod uret) i samme grad.
div bredde: 100px; højde: 100px; transformer: roter (-30deg);
- "Rotere" demo
IV - Skew
Det skævhed Metode gør det muligt for os at oprette en slags parallelogram. Den indeholder også to værdier af X- og Y-aksen. Men værdien selv er angivet i grad, i stedet for lineære målinger som vi bruger til vægt eller den Oversætte metode. Her er et eksempel:
div bredde: 200px; højde: 100px; transformere: skew (30deg, 10deg);
- "Skew" demo
V - Flere metoder
Det omdanne Ejendommen er ikke begrænset til at håndtere kun én metode, faktisk kan vi inkludere flere metoder i enkelterklæringer, som denne:
div bredde: 100px; højde: 100px; transformere: translateX (100px) rotere (45deg);
Ovenstående stykke vil flytte elementet 100px til højre og samtidig roterer det 45 grader.
"Multiple Method" demo.
Transformere oprindelse
Det transfrom-oprindelse - som navnet antyder - bruges til at styre startpunktet for transformationen. Hvis vi ikke udtrykkeligt erklærer denne ejendom med følgende syntaks transform-oprindelse: X Y;, så vil browseren tage standardværdien, som er 50% for X og 50% for Y.
Nu, hvis vi angiver transformationsbaseret oprindelse til 0 (X) 0 (Y) vil transformationen starte øverst til venstre.
Igen skal alle browsere stadig have prefixversionen til at ringe til denne ejendom. Så her er den komplette version for at sikre, at den virker i de fleste aktuelle browsere:
-webkit-transform-oprindelse: X Y; -moz-transform-oprindelse: X Y; -O-transform-oprindelse: X Y; -ms-transformation-oprindelse: X Y; transform-oprindelse: X Y;
- "Transform-origin" -demo
Konklusion
Vi har gennemgået alle de fire vigtige transformationsmetoder; oversætte, skala, dreje og skrå
Men som nævnt er dette modul stadig i det tidlige trin, så hvis du vil anvende disse metoder på din næste hjemmeside, skal du sørge for at det nedbrydes yndefuldt for uforenelige browsere (jeg henviser ikke til IE6 her).
Endelig kan du se hele demoen eller downloade kilden fra følgende links.
- Demo
- Download kilde
