Hvordan lage en 3D-kube med kun CSS og HTML

Det finnes flere måter å lage en 3D-kube på, også ved å benytte kun HTML og CSS. Du kan lage mange varianter ved å benytte ulike bilder på terningen, endre hvordan den roterer osv. For å få kuben til å bli tredimensjonal trenger du tre akser — en vertikal akse som kalles «y-aksen», en horisontal som kalles «x-aksen» og så har vi «z-aksen» som ser ut som den kommer mot deg. Dette er utgangspunktet for å lage en kube som kan ses fra alle sider. Du starter med å lage HTML-elementer, seks elementer, ett for hver side i kuben, og som pakkes inn i et container-element.

Nå starter du med CSS, og det første du gjør er å fastsette størrelsen på objektet ditt med «perspective». For å oppnå riktig 3D-effekt er det viktig å sette korrekt størrelse. Deretter må hver side av kuben stilsettes, ellers vil sidene bare ligge flatt oppå hverandre. For å få til dette benyttes CSS-koden «transform-style», som settes til «preserve-3d». Og du posisjonerer hver side med egenskapen «transform» og verdiene «translateZ», «translateX», «translateY», samt verdiene «rotateX» og «rotateY». For å rotere kuben, må du sette container-elementet til en vilkårlig rotasjonsvinkel langs x-aksen. For eksempel kan du benytte følgende kode; «transform: rotateX(45deg);» om du ønsker kuben skal rotere i en 45 graders vinkel.

admin