Hvordan lage Transformations med CSS 3

November 2  by Eliza

CSS 3 kan du lage mange kule effekter på nettstedet ditt for visning på iPhone og iPad. De CSS 3 forvandle egenskaper gjør deg i stand til å forvandle 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 blir oppgitt, er hver anvendt i den rekkefølgen de står.

Transformation alternativene inkluderer de som er beskrevet i denne listen:

  • skala - Endrer høyden og bredden av et element. Du kan spesifisere to tall for å definere en annen skala for bredde og høyde. Imidlertid er dette element som vanligvis brukes med bare ett nummer for å skalere et element proporsjonalt. Den første av de følgende eksempler forvandler element for å skalere til halvparten av sin størrelse, og den andre omformer element til halvparten så bred og dobbelt så høy:

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

  • sette - Bruk denne egenskapen til å oversette, eller flytte, et element fra posisjon A til posisjon B like langs x og y-aksen. Man kan også bruke translateX og translateY å bevege elementene langs bare en akse av gangen. For eksempel denne koden fører til et element for å flytte 150 piksler fra venstre og 150 fra toppen:

    -webkit-transform: sette (150 piksler, -150px);

  • skew - Bruk denne egenskapen til å forskyve seg, eller endre plasseringen av et element basert på en angitt verdi som forskyver et element på x og y-aksen. For eksempel kan denne forskyve et element 20 grader på x-aksen:

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

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

    Som du kan se i figuren, fører det bildene til høyre og venstre i denne designen til vinkel bort fra sentrum bilde:

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

I SCUBA nettstedet eksempel vist i denne figuren, merker at de to utenfor bildene roter til venstre og høyre, henholdsvis ved hjelp av CSS Roter funksjon - men bare på Safari, Firefox og Chrome. Besøk denne siden med IE og boksene er alle i en rett linje, men de ser ikke ille på den måten, så det er ingen skade skjedd.

Hvordan lage Transformations med CSS 3


Legg også merke til at det er et bilde gjemt i bunnen av design, slik at når du slår på iPad / iPhone fra liggende til stående visning, fyller innhold hele skjermen.