Hvordan man bruker CSS3 tredimensjonale transformasjoner - dummies

Når nettlesere blir kraftigere, kommer nye muligheter for HTML5 og CSS3 programmering fram. En av de mer spennende utviklingene er dannelsen av 3D-transformasjoner. En 3D-transformasjon ligner de tradisjonelle transformasjonene, men det tillater en virtuell tredje akse.

Vanlige 2D-animasjoner bruker 2D-koordinatsystemet, med en X-aksel som går side til side og en Y-akse som går over til bunn. Selv i 2D-transformasjoner, er det en stilig bekreftelse av en Z-akse. Z-aksen går gjennom midten av objektet og peker direkte mot betrakterens øyne og tilbake til uendelig bak skjermen. 2D-rotasjoner er rundt denne imaginære Z-aksen.

Du kan bestemme hvilke elementer som overlapper andre elementer gjennom CSS-egenskapen, så selv om alle skjermelementer har samme faktiske avstand fra brukeren, ser de ut til å ha noen form for dybde.

3D-transformasjoner har samme generelle operasjoner som 2D (oversette, rotere og skala), men du kan bruke transformasjonen langs en av de tre aksene: X, Y eller Z.

Du ser fem bokser med nesten identiske stiler. Hver boks har en annen 3D-transformasjon som er brukt:

• Rute 1 har standardadferd: Rute 1 bruker vanlig layout uten 3D-transformasjon brukt i det hele tatt.

• Boks 2 roteres 45 grader rundt x: Boks 2 ser ut til å være avkortet, men det roteres faktisk rundt den horisontale (X) aksen. Merk at både selve boksen og teksten i boksen er forkortet.

• Boks 3 har også blitt rotert rundt X-aksen, men denne er rotert nesten 90 grader, så det er nesten usynlig. Boks 4 er opp ned-ned:

• Boks 4 roteres 180 grader rundt X-aksen, og vri den helt. Merk at roterende rundt Y-aksen også vil vende på boksen, men teksten vil forbli øverst, og vil bli reversert langs den vertikale aksen. Boks 5 gjør alle slags gale ting:

• Boks 5 har to transformasjoner påført samtidig. Den roteres 45 grader rundt x og -45 grader langs y. Ta en titt på koden for å se nøyaktig hva som skjer her.

transform3D. html kropp {perspektiv: 1000; -webkit-perspektiv: 1000;} # box1, # box2, # box3, # box4, # box5 {bredde: 100px; høyde: 80px; grense: 3px solid svart; bakgrunnsfarge: gul;} # box2 {transform: rotateX (45deg); -webkit-transform: rotateX (45deg);} # box3 {transform: rotateX (89deg); -webkit-transform: rotateX (89deg);} # box4 {transform: rotateX (180deg); -webkit-transform: rotateX (180deg);} # box5 {transform: rotate3D (1, 2, 0, 45deg); -webkit-transform: rotate3D (1, -1, 0, 45deg);}

3D Transform Demo

boks 1
boks 2 boks 3 boks 4 boks 5 < Den første nye regelen er perspektiv.Endre perspektivet til foreldreelementet som vil inneholde de forvandlede elementene dine. Dette gir deg muligheten til å bestemme hvordan elementene ser ut til å vises. Perspektivet angir hvor nær kameraet ser ut til å være til elementene. Bokser 2 til 4 bruker alle samme transformasjonsregel:. Denne mekanismen er mye som 2D rotate () -funksjonen, men roterer langs X-aksen. Det er også rotatey () og rotatez () funksjoner, men rotatez () er sjelden brukt fordi det er akkurat som 2D rotate () -teknikken.

Hvis du vil bruke mer enn en rotasjon, kan du bruke roter 3d () -funksjonen. Denne funksjonen tar fire parametere. De tre første er modifikatorer for de tre aksene, og den fjerde er en vinkel.

CSS3 støtter også translatex, translatey () og translatez () funksjoner. Disse mekanismene lar deg angi en oversettelse langs en bestemt akse Translate3d () -funksjonen lar deg oversette langs flere akser samtidig.

CSS3 inkluderer skala, skala og skala, men igjen brukes disse ikke alltid fordi de virker likt 2D-skaleringsfunksjonen. Det finnes også en skala 3d () funksjon for bruk med flere skalaer.

Støtten til 3D-transformasjonene vokser, men er ikke fullført. I øyeblikket vil versjonene -webkit og no-prefix støtte de fleste nettlesere. IE-familien av nettlesere har begrenset støtte for 3D-transformasjoner.