Snart er det JavaZone, og da blir det kosetime med Christian og meg. Vi skal lage et nytt zombiespill - denne gangen med terninger.Terningspill er langt morsommere hvis man kan se terningene rulle, så jeg brettet opp ermene (ikke armene) og skrev litt CSS i forberedelse til presentasjonen.Her er det jeg lærte om å kaste terninger med CSS.Først trenger vi en kubeEn kube har seks sider, og de må vi tegne hver for seg:La oss forankre sidene i en kube:Her sier vi position: relative fordi alle sidene av terningen skal ligge oppå hverandre i utgangspunktet.Det neste viktige poenget er preserve-3d: Dette lar oss rotere dette elementet og dets barn i samme tredimensjonale kontekst. Dette kommer vi tilbake til snart.På tide å legge litt styling på sidene:På dette tidspunktet ser terningen vår slik ut:Ikke så tredimensjonal enda. Litt vanskelig å se at det er seks sider. For å kunne se hva som skjer videre, må vi først rotere kuben litt:.La oss starte litt naivt, og bare rotere all sidene på plass:.Observer at alle sidene har rotert om den sentrale aksen i kuben. Det ser ikke ut som noen terning akkurat.Vi trenger å skyve hver side vekk fra midten. Hvor mye? Sidene våre er jo 120px store, så vi må skyve 60px i hver retning. Voila:.Og dermed har vi fått en kube. Men den ser ikke helt … riktig ut. Det er noe galt med perspektivet:.Ahh, det var bedre.Når man setter perspective så sier man hvor langt det er mellom brukeren og punkter i posisjon Z0. Punkter med høyere Z oppleves nærmere, og punkter med lavere Z lenger unna. Forsvinningspunktet er per default i midten av elementet med perspektiv, men dette kan også flyttes.La oss prøve det. Først fjerner vi roteringen av kuben for å gjøre det tydeligere:Nå kan vi flytte forsvinningspunktet:.Helt supert. Nå ser det mer ut som om terningen ligger på et bord, og ikke svever i lufta.PS! Tidligere nevnte jeg såvidt transform-style: preserve-3d;. Nå er det lettere å forklare hvorfor denne er viktig: Vi roterer kuben og hver side med separate transform-regler. Uten å spesifisere preserve-3d ville disse blitt rotert uavhengig av hverandre. Nå roteres de i samme kontekst.La oss også slenge på noen tall på sidene:..Så var det dette med kastingen daFor at en terning skal oppfattes som kastet må den:være i luftaroterelande på en sideLa oss starte på begynnelsen. For å gi inntrykk av å være i lufta uten å ta for mye plass på skjermen, så bestemte jeg meg for å zoome den vekk og litt opp. Her er animasjonsdefinisjonen:Den starter på utgangsposisjonen, forsvinner ned til 20% i størrelse og opp 200px, før den kommer tilbake igjen.Ettersom jeg ønsker at denne animasjonen skal skje uavhengig av hvordan terningen er rotert, så må jeg gjøre skaleringen utenfor .cube. Jeg lager en .dice:Den får samme regler som kuben, slik:Så gjelder det å koble inn animasjonen når terningen skal rulles:Klikk på terningen for å «rulle» den:Scriptet legger her bare på klassen rolling - det er alt som skal til for å sparke animasjonen i gang. (klassen fjernes også igjen etter et par sekunder, for at du skal kunne klikke flere ganger)På tide å rotere terningen også. Vi kan starte med å finne hvordan kuben må roteres for å vise hver side:Vi kan også legge på en transition, for syns skyld:Klikk på terningen for å snu den til neste side:Problemet med denne teknikken er at den ikke riktig fanger opplevelsen av en snurrende terning i lufta. Spesielt de første transisjonene var temmelig trauste. Men du la kanskje merke til at de påfølgende transisjonene hadde mer futt?Trikset her er å rotere til riktig side, men å snurre litt ekstra mange ganger. La oss si at vi skal snurre til side 1. Istedet for å gå til 0 0 0 kan vi gå til 720 -360 360. Det vil være samme side som vises, men kuben må rotere langt mer for å komme seg dit.Det kan jo også hende at terningen skal lande på samme side som den startet. Da må vi også sørge for at terningen ser ut til å snurre litt først.Det jeg endte opp med var å definere animasjoner fra/til alle sider. Noe slikt:Og så videre for 2-to-1, 2-to-2, 2-to-3 etc etc. Totalt 36 keyframes, med tilhørende css-klasser:Her er animasjonsdeklarasjon for kuben:Og her kan du se de siste to triksene mine:animation-fill-mode: bothDenne sørger for at terningen beholder posisjonen sin når den er ferdig animert. Uten denne vil terningen hoppe tilbake til utgangsposisjonen sin når animasjonen er ferdig.animation-duration: 1.4sRoteringen er satt til 1.4s, mens skaleringen er satt til 1.8s (lenger oppe i artikkelen). Dermed vil ikke kuben rotere hele veien - den stabiliserer seg mot slutten, og ser ut til å bli satt pent ned på bordet de siste 400ms.Resultatet kan du se her:Klikk for å rulle terning!