Komposisjon

 

For å kunne animere (via nøkkelrammer eller input events) et 3D objekt, må vi starte med å komponere objeketet slik det ser ut på det første bildet.

Hvilket betyr at vi må lage:

• Ulike sider av objektet.
• En Container som inneholder alle de ulike sidene av objektet.
• En Viewport for din Container.

 

La oss ta det fra starten av:

 

• Sider av objektet

 

Uansett om du lager et roterende 2D eller 3D objekt, må du hensynta en CSS egenskap som heter backface-visibility som påvirker om et element har en synlig bakside eller ikke. Dersom man velger å ha synlighet, vil man vise et reversert bilde av det gitte elementet.
La oss anta at du har et element med rød bakgrund med en tekst som lyder “Hello”.  Med en udefinert backface-visibility eller synlig definert backface-visibility: visible vil vårt objekt vises med et speilvendt uttrykk dersom man snur elementet 180 grader.

Men, dersom du definerer egenskapen som skjult hidden (eksempelvis backface-visibility:hidden), vil rotering av objektet fremstå som skjult og en hvit bakside vil være det eneste synlige.

Dette er viktig for deg å vite om når du har behov for å snu elementer slik som for ekspempel et kort eller en kube hvor du eksplisitt ikke ønsker å ha en reverse look.

 

• Container

 

Det neste på listen er definisjon av en container, som vanligvis er div som må ha egenskap transform-style: preserve-3d. Når dette er definert er det på tide å sette opp alle sidene av objektet. La oss ta et eksempel med vending av et kort. Dette gjør vi ved å definere begge sider av kortet, både forside og bakside,

 

<div class="container">
    <div class="card front">FRONT</div>
    <div class="card back">BACK</div>
</div>

 

hvor vi tillegger dem backface-visibility: hidden regel og transform-style: preserve-3d til .container klassen:

 

.container {
    transform-style: preserve-3d;
}

.card {
    backface-visibility: hidden;
}

 

Og *vending av bakside* slik at det første bildet allerede ser ut som et faktisk kort:

 

.card.back {
    transform: rotateY(180deg);
}

 

Forresten, *nårenn du kan*, benytt transform når du definerer reglene. På denne måten kan du være 100% sikker på at de benytter hardware GPU. Hvis du ønsker å flytte på ting, rotere dem, forskyve eller liknende, bruk transform. Slik vil du oppnå den beste ytelsen.

 

For å oppsummere vårt eksempel, sjekk ut denne linken:[Live Code Example]

 

• Viewport

 

Da var vi kommet så langt. Det neste vi skal sette opp er perspective i viewport.

Dette vil gjøre det mulig for deg å modifisere avstanden mellom Z plane og brukeren.
Denne avstanden lager en viss følelse av et 3D objekt, slik at du kan lage en slags “fish-eye effekt” eller et normalt standardisert objekt, avhengig av avstanden du velger å benytte.

Du kan benytte hvilken som helst enhet du foretrekker. Desto mindre verdi, jo større “fish-eye” effekt oppnår du. Desto større verdi, jo flere vertikaler får samme størrelse.
Så, for å oppdatere koden din, la oss lage yttereligere `div` som dekker hele innholdet:

<div class="scene">
    <div class="container">
        <div class="card front">FRONT</div>
        <div class="card back">BACK</div>
    </div>
</div>

 

I tillegg til passende CSS regler:

 

.scene {
    perspective: 1000px; // you can use other units if you want
}

[Live Code Example]

 

• Animer!

 

Til slutt, men ikke minst, la oss vende på objektet.

Vi benytter en nøkkelramme for å vende på hele kortet. Ikke forsøk å vende de individuelle sidene hver for seg, da Chromium-baserte nettlesere ikke vil tillate deg å gjøre dette.
Produktet av å vende sidene individuelt vil dessuten forårsake at en side vendes normalt og den andre siden “hopper” tilbake til den siste nøkkelrammen uten noen myk overgang og uten animeringseffekt.

Firefox har ingen utfordringer med dette, men la oss være ærlige: Vending av hele objektet gir litt mer mening enn å bevege på de individuelle delene av objektet hver for seg.

Så la oss nå legge til regler for nøkkelrammene:

 

.container {
    animation: spin-it 2s ease alternate infinite;
}

@keyframes spin-it {
    from {
        transform: rotateY(-30deg);
    }
}

to {
    transform: rotateY(180deg);
}

 

Dersom kortet ditt roterer på siden og ikke fra senter, betyr dette at din .card klasse ikke har den samme bredde width og høyde height som containeren. Dette kan du fikse ved å legge til disse verdiene i containeren og deretter definere din .card klasse til å *nedarve* bredde og høyde:

.container {
    width: 200px;
    height: 100px;
}

.container .card {
    width: inherit;
    height: inherit;
}

 

• Objektet mitt er uklart, hvorfor?!

 

Animering med CSS har gode sider (GPU aksellerert animasjon, i stedet for CPU), men også noen mindre ulementer. Det animerte objektet er bare en kopi, og kreasjoner laget av en nettleser som kopierer kan ofte fremstå som uskarpe.

Du kan lage en work around for dette ved å benytte transform: scale(0.9).
Det vil generere et mindre bilde, men det vil bli like skarpt for originalen:

.container {
    transform: scale(0.9); // add it here as well to prevent image jumping to smaller size once the animation starts.
    animation: spin-it 2s ease infinite;
}

@keyframes spin-it {
    from {transform: rotateY(0) scale(0.9);}
    to {transform: rotateY(360deg) scale(0.9);}
}

[Final Live Code Demo]

 

 

______________

Title photo by Sebastian Svenson on Unsplash