En titt på CSS3 2D-omvandlingar
De Transformationsmodul är ett enormt tillägg i CSS3, det tar sättet att manipulera element på en webbplats till nästa nivå.
Det finns några experiment som verkligen förvånar mig, exempel som den här. Men vi kommer inte att bygga något som en CSS-bara ikon som på något sätt kan omvandlas till en autobot, eftersom det kan vara överväldigande och inte helt användbart i det verkliga livet också.
Istället kommer den här gången vi att gå tillbaka och granska grunderna i CSS3 2D Transformations för att se hur det fungerar på en grundläggande nivå.
Syntaxen
CSS3 Transformations-modulen låter oss i grunden förvandla ett element till viss utsträckning, såsom översättning, skalning, rotering och skevning.
Den officiella syntaxen är transform: metod (värde). Men som alla andra CSS3 bra tillägg som fortfarande finns i de tidiga stadierna behöver de nuvarande webbläsarna fortfarande syntaxversionen för att köra transformationerna. Så, den fullständiga syntaxen skulle visa sig så här:
transformera: metod (värde); / * W3C Official Syntax * / -o-transform: metod (värde); / * Opera 10.5+ * / -ms-transform: metod (värde); / * Internet Explorer 9.0+ * / -moz-transform: metod (värde); / * Firefox 3.6+ * / -webkit-transform: metod (värde); / * Chrome / Safari 3.2+ * /
Även den metod som vi hänvisar till ovan är transform-functions, som kan ersättas med något av följande: Översätt(), skala(), rotera() eller skev().
Värdet
Det mesta av metodens värde kommer att motsvara x-axel och y-axel. Om du kommer ihåg det kartesiska koordinatsystemet från din matematik klass i gymnasiet, är grundprincipen ganska lik, X-axeln representerar den horisontell linje och Y-axeln representerar vertikal linje.
Med undantag för rotationer. De rotation kommer att använda polära koordinater som uttrycks i grader som sträcker sig från 0 till 360.
Värdena för alla metoder kan vara både negativa eller positiva. Ta bara en anteckning, eftersom websidan läses sekventiellt från topp till botten vilket gör att Y-axeln på webben fungerar motsatt från den ursprungliga principen om kartesiska koordinater. Det betyder att när du lägger till ett negativt värde till y-axel, det kommer att flyttas till toppen i stället.
Använda transformationerna
Låt oss nu se följande grundläggande demonstration för att se Transformation in action.
Jag översätter
Bli inte oversvämd med termen Översätt, det kommer inte att översätta främmande språk. De Översätt här är faktiskt en metod för att flytta element i någon riktning.
Metoden innehåller två värden; X och Y. de X-värde som vi påpekade ovan kommer att ta elementet horisontellt; till vänster eller till höger, medan Y värdet tar det vertikalt till botten eller till toppen.
Låt oss nu se några enkla demonstrationer nedan:
div bredd: 100px; höjd: 100px; transformera: translate (100px, 250px);
Biten ovan kommer att flytta elementet för 100px till höger och 250px till botten.
div bredd: 100px; höjd: 100px; transformera: translate (100px, 0);
Biten ovan kommer att flytta elementet precis till höger för 100px, eftersom vi nollställer Y-axeln. Då, om vi vill flytta elementet till vänster, behöver vi bara ställa in X-axeln negativt, enligt följande:
div bredd: 100px; höjd: 100px; transformera: translate (-100px, 0);
- "Översätt" demo
Alternativt kan vi flytta elementet i en enda riktning med dessa enskilda metoder. translateX () och translateY (), Skillnaden är att var och en av dessa metoder accepterar endast ett värde.
Så, praktiskt sett, transformera: translate (-100px, 0) är också lika med transformera: translateX (-100px).
II - Skala
De skala metod tillåter oss att förstora eller minska elementen från dess faktiska storlek. Skalaens värde är detsamma som Översätt ovanstående metod innehåller den också X och Y. Den enda skillnaden är att vi inte specificerar enheten. Här är ett exempel:
div bredd: 100px; höjd: 100px; transformera: skala (1,5);
Ovanstående exempel kommer att förstora div 1,5 eller 150% av dess faktiska storlek, och eftersom vi skala det lika för både X- och Y-riktningarna, behöver vi bara förklara det i ett värde. Du kan också deklarera det på så sätt transformera: skala (1,5,1,5); Om du vill gå mer i detalj kommer det bara att göra detsamma.
Om vi vill minska elementet använder vi specifikt ett värde från 0,999 till absolut 0, som exempel nedan, vilket kommer att minska storleken på diven för 50% eller hälften:
div bredd: 100px; höjd: 100px; transformera: skala (0,5);
Men var försiktig, om du anger värdet för att vara absolut “0” de div kommer bara att försvinna, så om du inte har en giltig anledning att göra det, skulle jag inte rekommendera att göra det.
- "Skala" demo
III - Rotera
Som vi nämnde tidigare i detta inlägg, rotera Metoden använder polära koordinater, så värdet anges i grader. Här är två exempel
Biten nedan roterar div 30 gradersurs medurs.
div bredd: 100px; höjd: 100px; transformera: rotera (30deg);
Ett negativt värde, som illustreras i exemplet nedan, kommer att rotera div i motsatt riktning (moturs) i samma grad.
div bredd: 100px; höjd: 100px; transformera: rotera (-30deg);
- "Rotera" demo
IV - Skew
De skev Metoden gör att vi kan skapa ett slags parallellogram. Den innehåller också två värden på X- och Y-axeln. Värdet själv anges dock i grad, istället för linjära mätningar som vi använder för skala eller den Översätt metod. Här är ett exempel:
div bredd: 200px; höjd: 100px; transformera: skew (30deg, 10deg);
- "Skew" -demo
V - Flera metoder
De omvandla egendom är inte begränsat till att hantera endast en metod, i själva verket kan vi inkludera flera metoder i enskilda deklarationer, så här:
div bredd: 100px; höjd: 100px; transformera: translateX (100px) rotera (45deg);
Ovanstående kod flyttar elementet 100px till höger och samtidigt roterar det 45 grader.
"Multiple Method" -demo.
Transformera ursprung
De transfrom-ursprung - som namnet antyder - används för att styra startpunkten för transformationen. Om vi inte uttryckligen förklarar den här egenskapen med följande syntax transformations-ursprung: X Y;, då tar webbläsaren standardvärdet som är 50% för X och 50% för Y.
Nu, om vi anger transform-ursprung till 0 (X) 0 (Y) startar transformationen längst upp till vänster.
Återigen behöver alla webbläsare fortfarande prefixversionen för att ringa den här egenskapen. Så här är den fullständiga versionen för att säkerställa att den fungerar i de flesta webbläsare:
-webkit-transform-ursprung: X Y; -moz-transform-ursprung: X Y; -o-transform-ursprung: X Y; -ms-transform-ursprung: X Y; transformations-ursprung: X Y;
- "Transform-origin" -demo
Slutsats
Vi har kommit igenom alla fyra viktiga transformationsmetoderna. översätt, skala, rotera och skeva
Men som sagt är den här modulen fortfarande i tidigt skede, så om du kommer att tillämpa dessa metoder på din nästa webbplats, se till att den försämras graciöst för inkompatibla webbläsare (jag hänvisar inte till IE6 här).
Slutligen kan du visa all demo eller ladda ner källan från följande länkar.
- demo
- Hämta källa
