Hvordan å transformere objekter med CSS3 - dummies

I CSS3, endrer en transform objekter på skjermen på en bestemt måte. For eksempel kan du rotere objektet eller skjære dimensjonene. Transformer gjør det enkelt å lage unike presentasjoner fra vanlige objekter - effekter som vanligvis vil trenge en designer eller grafiker å lage for deg. Følgende liste beskriver hvilke transformasjoner du kan utføre.

matrise (a, b, c, d, tx, ty): Setter objektet ved hjelp av en matrise definert av punktene a, b, c og d. Det oversetter så objektets posisjon på skjermen med en verdi betegnet av tx og ty. (Du kan prøve matrisen () transformere ut på w3schools.com.)

Det finnes versjoner av mange av disse funksjonene som fungerer på tredimensjonale objekter. For eksempel er det en matrix3d () -funksjon. Disse funksjonene legger til en z -aks i ligningen, slik at du kan manipulere tredimensjonale objekter i tredimensjonalt mellomrom. Du kan lese mer om hvordan 3D-versjonene fungerer på Mozilla Developer Network og CSS-Tricks.
oversette (tx, ty), translateX (tx), translateY (ty): Endrer posisjonen til objektet på skjermen med en horisontal mengde definert av tx, en vertikal mengde definert av ty, eller begge deler. (Du kan prøve translate () transformen på w3schools.com.)
skala (x, y), skalaX (x), skalaY (y): Streker objektet horisontalt med mengden angitt av x, vertikalt med mengden angitt av y eller begge deler. (Du kan prøve skalaen () transformere på w3schools.com.)
rotere (vinkel), rotateX (vinkel), roterY (vinkel): Roter objektet med antall grader angitt i ønsket akse. (Du kan prøve rotate () transformen på w3schools.com.)

Internet Explorer støtter ikke alle transformasjonene. For eksempel vil du oppdage at Internet Explorer 9 ikke støtter rotateX () og rotateY () -funksjonene.
skew (angleX, angleY), skewX (angleX), skewY (angleY): Spretter objektet med antall grader horisontalt spesifisert av angleX, antall grader vertikalt angitt av angleY eller begge deler. (Du kan prøve skew () transformen på w3schools.com.)

Den beste måten å forstå disse transformasjonene på er å se dem i aksjon. Følgende prosedyre hjelper deg å lage et eksempelprogram som viser transformasjonene du kan utføre.

Opprett en ny HTML5-fil med tekstredigeringsprogrammet.
Skriv inn følgende kode for HTML-siden.
```
Eksempler på transformasjoner
Matrise
Oversett
Skala
Rotere
Rotere Y
Skew
```
Eksemplet demonstrerer transformasjonene som er oppført som avsnitt.Du kan prøve andre transformasjoner ved å endre eksemplet (en god idé).
Lagre filen som Transforms. HTML.
Opprett en ny CSS-fil med teksteditoren din.

Skriv inn følgende CSS-stilinformasjon.

#Matrix {border: solid; border-farge: svart; kantbredde: tynn; skriftstørrelse: 30px; margin: 50px; bredde: 140px; høyde: 40px; transformere: matrise (0, 866, 0. 5, 0. 4, 0. 866, 5, 15); -ms-transform: matrise (0, 866, 0. 5, 0. 4, 0. 866, 5, 15); -webkit-transform: matrise (0, 866, 0. 5, 0. 4, 0. 866, 5, 15);} #Translate {border: solid; border-farge: svart; kantbredde: tynn; skriftstørrelse: 30px; margin: 50px; bredde: 140px; høyde: 40px; transformere: oversette (20px, 30px); -ms-transform: oversette (20px, 30px); -webkit-transform: translate (20px, 30px);} #Scale {border: solid; border-farge: svart; kantbredde: tynn; skriftstørrelse: 30px; margin: 50px; bredde: 140px; høyde: 40px; transformere: skala (1, 6, 0. 75); -ms-transformer: skala (1, 6, 0. 75); -webkit-transform: skala (1, 6, 0. 75);} #Rotate {border: solid; border-farge: svart; kantbredde: tynn; skriftstørrelse: 30px; margin: 50px; bredde: 140px; høyde: 40px; transformer: roter (140deg); -ms-transformer: roter (140deg); -webkit-transform: roter (140deg);} #RotateY {border: solid; border-farge: svart; kantbredde: tynn; skriftstørrelse: 30px; margin: 50px; bredde: 140px; høyde: 40px; transformere: roterY (140deg); -ms-transformer: roterY (140deg); -webkit-transform: rotateY (140deg);} #Skew {border: solid; border-farge: svart; kantbredde: tynn; skriftstørrelse: 30px; margin: 50px; bredde: 140px; høyde: 40px; transformere: skew (15deg, 30deg); -ms-transformere: skew (15deg, 30deg); -webkit-transform: skew (15deg, 30deg);}

Hver av disse transformasjonene bruker nøyaktig samme avsnittformat slik at du bedre kan forstå hvordan de fungerer. Bruken av en grense gjør det lettere å forstå transformasjonen fordi kombinasjonen av ord og et skjermbilde overfører mer informasjon (noe du må huske når du lager dine egne testapplikasjoner).

Transformer anses eksperimentelle, selv om de fremstår som en del av spesifikasjonen. For å kunne bruke dem med Internet Explorer 9+ må du inkludere prefixet prefix. Både Safari og Chrome krever -webkit-prefiks. Det er derfor du ser hver transformasjon oppført tre ganger. Transformene bør også fungere med både Opera og Firefox uten noe problem.

Lagre filen som Transforms. CSS.
Legg inn transformasjonseksemplet.

Du ser transformasjonseffekter. Alle disse transformasjonene bruker samme skrift, skriftstørrelse og boksestørrelse, så forskjellene du ser skyldes bare transformasjonen som foregår. Legg merke til at rotateY () -transformasjonen faktisk viser teksten bakover.

Prøv å endre transformasjonsverdiene for å se hvordan endringene påvirker utgangen. Du vil bli overrasket over hvor fleksible disse funksjonene er.

Det er mulig å kombinere transformasjoner for å skape enda mer uvanlige effekter. Bare skille dem med et mellomrom. For å kombinere en rotate () med en skew (), ville du skrive transform: rotate (25deg) skew (15deg, 30deg); .