En titt på CSS3 2D-transformasjoner
De Transformasjonsmodul er et enormt tillegg i CSS3, det tar måten vi manipulerer elementer på et nettsted til neste nivå.
Det er noen eksperimenter som virkelig forbløffer meg, eksempler som denne. Vi kommer imidlertid ikke til å bygge noe som et CSS-eneste ikon som på en eller annen måte kan forvandles til en autobot, da det kan være overveldende og ikke helt anvendelig i det virkelige liv også.
I stedet, denne gangen, vil vi gå tilbake og se på grunnleggende om CSS3 2D Transformations for å se hvordan det fungerer på et grunnleggende nivå.
Syntaxen
CSS3 Transformations-modulen lar oss i utgangspunktet forvandle et element til en viss grad, for eksempel oversetting, skalering, roterende og skjeving.
Den offisielle syntaksen er transform: metode (verdi). Men som alle andre CSS3 flotte tillegg som fremdeles er i de tidlige stadiene, trenger de nåværende nettleserne fortsatt syntaksversjonen til å kjøre transformasjonene. Så, den komplette syntaksen skulle vise seg slik:
transformere: metode (verdi); / * W3C Offisiell syntaks * / -o-transform: metode (verdi); / * Opera 10.5+ * / -ms-transform: metode (verdi); / * Internet Explorer 9.0+ * / -moz-transform: metode (verdi); / * Firefox 3.6+ * / -webkit-transform: metode (verdi); / * Chrome / Safari 3.2+ * /
Også metoden vi refererer til ovenfor er transform-funksjoner, som kan erstattes med ett av følgende: oversette(), skala (), rotere() eller skew ().
Verdien
De fleste av metodens verdi vil tilsvare X-aksen og Y-aksen. Hvis du husker det kartesiske koordinatsystemet fra din matsklasse i videregående skole, er grunnprinsippet ganske lik, X-aksen representerer horisontal linje og Y-aksen representerer vertikal linje.
Bortsett fra rotasjoner. De rotasjon vil bruke polære koordinater som uttrykkes i grader som spenner fra 0 til 360.
Verdiene for alle metodene kan være både negative eller positive. Bare ta et notat skjønt, siden nettsiden leses sekvensielt fra topp til bunn som gjør at Y-aksen på nettet virker motsatt fra det opprinnelige prinsippet om kartesiske koordinater. Dette betyr at når du legger til en negativ verdi til Y-aksen, det vil flytte til toppen i stedet.
Bruk av transformasjonene
Nå, la oss se følgende grunnleggende demonstrasjon for å se Transformation in action.
Jeg oversetter
Ikke vær overskyet med begrepet oversette, det vil ikke oversette fremmedspråk. De oversette her er faktisk en metode for å flytte elementer i en eller annen retning.
Metoden inneholder to verdier; X og Y. de X-verdi som vi påpekte ovenfor vil ta elementet horisontalt; til venstre eller til høyre, mens Y verdien vil ta det vertikalt til bunnen eller til toppen.
Nå, la oss se noen enkle demonstrasjoner nedenfor:
div bredde: 100px; høyde: 100px; transformere: oversette (100px, 250px);
Utsnittet over vil flytte elementet til 100px til høyre og 250px til bunnen.
div bredde: 100px; høyde: 100px; transformere: oversette (100px, 0);
Utgangen ovenfor vil flytte elementet til høyre for 100px, fordi vi nullstiller Y-aksen. Så, hvis vi vil flytte elementet til venstre, trenger vi bare å angi X-aksen negativt, som følger:
div bredde: 100px; høyde: 100px; transformere: oversette (-100px, 0);
- "Oversett" demo
Alternativt kan vi flytte elementet i en enkelt retning med disse individuelle metodene; translateX () og translateY (), forskjellen er at hver av disse metodene aksepterer bare en verdi.
Så, praktisk talt, transformere: oversette (-100px, 0) er også lik transformere: translateX (-100px).
II - Skala
De skala Metoden tillater oss å forstørre eller redusere elementene fra den faktiske størrelsen. Skalens verdi er den samme som oversette metode ovenfor, inneholder den også X og Y. Den eneste forskjellen er at vi ikke angir enheten. Her er et eksempel:
div bredde: 100px; høyde: 100px; transformere: skala (1,5);
Eksemplet ovenfor vil forstørre div 1,5 eller 150% av sin faktiske størrelse, og siden vi skaler det like for både X- og Y-retningene, trenger vi bare å erklære det i en verdi. Du kan også deklarere det på denne måten transformere: skala (1,5,1,5); Hvis du vil gå mer detaljert, vil det bare gjøre det samme.
Videre, hvis vi ønsker å redusere elementet, vil vi spesifikt bruke en verdi fra 0.999 til absolutt 0, som eksempelet nedenfor, som vil redusere størrelsen på diven for 50% eller halvparten:
div bredde: 100px; høyde: 100px; transformere: skala (0,5);
Men vær forsiktig, hvis du setter verdien til å være absolutt “0” de div vil bare forsvinne, så hvis du ikke har en gyldig grunn til å gjøre det, vil jeg ikke anbefale å gjøre det.
- "Skala" demo
III - Roter
Som vi tidligere nevnte i dette innlegget, rotere Metoden bruker polære koordinater, så verdien er oppgitt i grader. Her er to eksempler
Utsnittet nedenfor roterer div 30 grader med klokken.
div bredde: 100px; høyde: 100px; transformer: roter (30deg);
En negativ verdi, som illustrert i eksempelet nedenfor, vil rotere div i motsatt retning (moturs) i samme grad.
div bredde: 100px; høyde: 100px; transformer: roter (-30deg);
- "Rotere" demo
IV - Skew
De skew Metoden gjør det mulig for oss å lage en slags parallellogram. Den inneholder også to verdier av X- og Y-aksen. Imidlertid er verdien selv oppgitt i grad, i stedet for lineære målinger som vi bruker for skala eller oversette metode. Her er et eksempel:
div bredde: 200px; høyde: 100px; transformere: skew (30deg, 10deg);
- "Skew" demo
V - Flere metoder
De forvandle Eiendommen er ikke begrenset til å håndtere bare en metode, faktisk kan vi inkludere flere metoder i enkeltdeklarasjoner, slik som dette:
div bredde: 100px; høyde: 100px; transformere: translateX (100px) rotere (45deg);
Ovennevnte kutt vil flytte elementet 100px til høyre og samtidig roterer det også 45 grader.
"Multiple Method" -demo.
Transformere opprinnelse
De transfrom-opprinnelse - som navnet antyder - brukes til å kontrollere startpunktet for transformasjonen. Hvis vi ikke eksplisitt erklærer denne egenskapen med følgende syntaks transformere-opprinnelse: X Y;, da vil nettleseren ta standardverdien som er 50% for X og 50% for Y.
Nå, hvis vi spesifiserer forvandle-opprinnelse til 0 (X) 0 (Y) vil transformasjonen starte øverst til venstre.
Igjen, alle nettleserne trenger fremdeles prefiksetversjonen for å ringe denne egenskapen. Så, her er den komplette versjonen for å sikre at den fungerer i de fleste nettlesere:
-webkit-transform-opprinnelse: X Y; -moz-transform-opprinnelse: X Y; -O-transform-opprinnelse: X Y; -ms-transform-opprinnelse: X Y; transformere-opprinnelse: X Y;
- "Transform-origin" -demo
Konklusjon
Vi har kommet gjennom alle de fire viktige transformasjonsmetodene; oversette, skala, rotere og skjede
Men som nevnt, er denne modulen fortsatt i det tidlige stadiet, så hvis du vil bruke disse metodene på ditt neste nettsted, sørg for at det brytes grasiøst for uforenlige nettlesere (jeg henviser ikke til IE6 her).
Til slutt kan du se alle demoene eller laste ned kilden fra følgende linker.
- Demo
- Last ned kilde
