Hvordan du lager transformasjoner med CSS 3 - dummies

CSS 3 lar deg lage mange kule effekter på nettstedet ditt for visning på iPhone og iPad. CSS 3-transformasjonsegenskapene gjør at du kan transformere et element for å skape effekter i 2D og 3D. Du kan angi en liste over transformasjoner for å endre flere aspekter av et element. Hvis flere alternativer er spesifisert, brukes hver i den angitte rekkefølgen.

Transformasjonsalternativer inkluderer de som er beskrevet i denne listen:

• skala - Endrer høyde og bredde på et element. Du kan angi to tall for å definere en annen skala for bredde og høyde. Imidlertid er dette elementet vanligvis brukt med bare ett tall for å skalere et element forholdsmessig. Det første av følgende eksempler forvandler elementet til skala til halvparten av størrelsen, og det andre forvandler elementet til halv så bredt og dobbelt så høyt:

  -webkit-transform: skala (0, 5); -webkit-transform: skala (2, 0. 5);
  

• translate - Bruk denne egenskapen til translate , eller flytte, et element fra posisjon A til posisjon B like langs x- og y-aksene. Du kan også bruke translateX og translateY for å flytte elementer langs bare en akse om gangen. For eksempel får denne koden et element til å flytte 150 piksler fra venstre og 150 fra toppen:

  -webkit-transform: oversette (150px, -150px);
  

• skew - Bruk denne egenskapen til skew , eller endre posisjonen til et element basert på en spesifisert verdi som skar et element på x- og y-aksene. Dette kan for eksempel skje et element 20 grader på x-aksen:

  -webkit-transform: skew (15deg, 4deg);
  

• rotere - Bruk denne egenskapen til rotere , eller endre posisjonen til et element basert på en spesifisert verdi som styrer rotasjonsvinkelen. For eksempel roterer det første eksemplet i denne koden et element 5 grader til høyre, den andre roterer elementet -5 (negative 5) grader.

  Som du ser i figuren, får det bildene til høyre og venstre i dette designet til å vinkle vekk fra midten bildet:

  -webkit-transform: roter (5deg); -webkit-transform: roter (-5deg);
  

I SCUBAs nettstedeksempel vist i denne figuren, merk at de to utvendige bildene roterer til venstre og høyre, henholdsvis ved hjelp av CSS Rotate-funksjonen - men bare på Safari, Firefox og Chrome. Besøk denne siden med IE og boksene er alle rett, men de ser ikke dårlig ut på den måten, så det er ingen skade gjort.

Merk også at det er et bilde tucked inn i bunnen av designet slik at når du slår iPad / iPhone fra liggende til stående visning, fyller innholdet hele skjermen.