Hvordan du bruker CSS3-transformasjoner - dummier

CSS3 inkluderer muligheten til å bruke geometriske transformasjoner på et hvilket som helst element i HTML5-websiden din. Dette gir et bemerkelsesverdig nivå av visuell kontroll som ikke tidligere er tilgjengelig for webutviklere.

Transformattributtet lar deg bruke en matematisk transformasjon til en div. Når du bruker transformasjon til et element, må du bruke ett eller flere av følgende parametere for å beskrive transformasjonsformen:

• translate : Flytter objektet fra standardposisjonen. Oversettelse krever to parametere, en X-måling og en Y-måling. Bruk standard CSS måleenheter.

• roter : Roter bildet rundt senterverdien. Tar en parameter, en vinkelmåling i grader. (For eksempel er 30 grader 30deg.)

• skala : Endrer størrelsen på objektet. Standardversjonen endrer både horisontal og vertikal størrelse jevnt. Skalaene og skalaene kan brukes til å justere skalaen langs en enkelt akse. Skala måles i standard CSS måleenheter. Hvis skalaen er større enn 1, er objektet større enn originalen. En skala mellom null og en gjør varen mindre enn den var.

• skew : Dette lar deg vippe elementet med en viss vinkel. Parameteren krever en vinkelmåling i grader. De skewx og skewy variasjonene tillater mer fullstendig kontroll over transformasjonen.

Du kan kombinere flere parametere ved å oppgi dem etter at transformasjonsattributtet er skilt av mellomrom.

For å illustrere, forestill deg følgende HTML-kode:

boks 1 boks 2 boks 3 boks 4 boks 5

Koden viser fem identiske divs. Til illustrasjonsformål deler alle divs samme felles CSS:

# box1, # box2, # box3, # box4, # box5 {bredde: 100px; høyde: 80px; grense: 3px solid svart; bakgrunnsfarge: gul;}

Bruk variasjoner av attributten til hvert element for å se hvordan transformasjonene fungerer.

# box2 {transform: translate (100px, 0px);} # box3 {transform: roter (45deg);} # box4 {transform: skala (2) translate (100px, 0px);} # box5 {transform: skew (3);}

Merk at nettleserstøtten endrer seg på dette elementet. Chrome og Safari forventer fortsatt -webkit-prefiks, men Firefox og Opera støtter ikke-forhåndsdefinert versjon. IE 10 fungerer teoretisk med standardversjonen, men versjon 9 krever prefixet, og tidligere versjoner av IE ignorerer ganske enkelt transformasjoner helt. Hvis du ser den faktiske kildekoden til transformasjonen.html-siden, ser du flere versjoner for å håndtere de ulike nettleserne:

# box2 {transform: translate (100px, 0px); -webkit-transform: translate (100px, 0px); -ms-transform: translate (100px, 0px);}

Til slutt vil sunn fornuft bryte ut og leverandørspesifikke prefikser vil ikke lenger være nødvendige, men for øyeblikket er det sikreste å sette dem på plass. Hvis du vil fange eldre versjoner av Firefox og Opera, kan du også inkludere disse (-moz- og -o-) prefiksene også.