Kubus

Met gebruikmaking van HTML, CSS3 en JavaScript, kan een kubus 3 dimensionaal worden weergegeven. In deze tutorialreeks wordt ook de nodige interactiviteit toegevoegd.

De opbouw van de kubus in HTML en CSS. Kenmerkende eigenschappen voor CSS zijn: perspective, transform-style: preserve-3d; (om de kubus met alle valkken in zijn geheel te kunnen draaien) en transform:rotateX en transform:translateX en natuurlijk de ondere 2 dicemnsies

Door in de transform: rotateX() de waarden aan te passen, draait de hele kubus.
Je kunt nu de kubus van alle kanten bekijken om te zien of alle zijvlakjes op hun plek staan.

We zoeken hier naar een handige manier om de kubus te laten draaien door variabelen in een functie in te voeren.
Die functie kun je later dan herhaaldelijk aanroepen zodat je de kubus dan continue kunt verdraaien.

Met de setInterval() functie kun je een functie herhaald aanroepen. Al zijn er wel betere methoden, met deze eenvoudige functie die je in aan een variabele toekent, heb je hier snel resultaat.

Met eventListeners, kun je acties koppelen aan de kubus.
Om te stoppen gebruik je clearInterval() en tussen de haakjes de variabele waarvan je de gezette interval wil verwijderen.

Om meer interactie mogelijk te maken, voegen we een interface toe aan onze pagina. Deze moet over de kubus komen te liggen en te zijner tijd ook ingeschoven kunnen worden. Daarom geven we de interface een position: absolute. Om deze te centreren krijgt hij een breedte, een left- en top waarde 0 en geven we de margin-left en margin-right een waarde auto mee.
In de interface wordt een kop opgenomen evenals span's die de waarden van de rotaties over de assen gaat weergeven. Deze span's zouden een breedte moeten krijgen, maar omdat ze van huis uit een display-eigenschap inline hebben, zetten we display op inline-block. Hierdoor worden de span's even breed en krijgen we een strakkere layout.
De footer moet zich onderscheiden en we geven het display aan de onderkant ook afgeronde hoeken mee. In de footer komt een pijltje en die halen we uit een lijst met html-entiteiten: http://dev.w3.org/html5/html-author/charref

Je kunt met eenvoudig JavaScript het paneel in- en uitschuiven. De footer wordt als knop gebruikt, die geven we dus een ID mee. Het paneel zelf heeft ook een ID. We kunnen dus variabelen maken, en deze vullen met de genoemde elementen uit de DOM.
We kunnen de knop weer een eventListener geven, die op het moment van klikken een functie aanroept. Deze functie past de top-waarde van het paneel aan, wijzigt zijn inhoud en past een boolean variabele aan, die bijhoud of het paneel nu is in- of uitgeschoven.

Om de gegevens uit te voeren, lopen we weer langs een vertrouwd pad: via de ID's van de elementen, voer je ze in variabelen.
Deze variabelen geef je dan via de methode innerHTML() een waarde. Die wordt gehaald uit de variabelen, die telkens worden aangepast. Vlak na hun aanpassing voer je ze uit.

De uitvoer leidt tot waarden die in de loop van de tijd sterk boven de 360 graden uitkomen. Mensen kunnen dat moeilijk interpreteren.
Gelukkig beschikt JavaScript over de 'modulus' methode. (%) Als je een getal als 17 modulus 5 neemt, (17%5) dat levert dat de restwaarde op die komt uit de deling van 17 door 5. Ons is het nu dus ook om die restwaarde te doen. We hebben na de ophoging dus slechts de modulus 360 van een waarde nodig: draaiZ = (draaiZ+1)%360;

De sliders kunnen via JavaScript de waarde aannemen, die de variabelen van de draaiing van de kubus heeft. eerst geven we de sliders een maximale en minimale waarde en een ID om ze hanteerbaar te maken voor het script. Daar stoppen we ze in variabelen. Met de eigenschap .value kunnen we ze de waarde geven van de draai-variabelen.

De variabelen, die de sliders bevatten kunnen ook een eventListener krijgen, die reageert op het event 'change'. Je kunt dan een functie koppelen, die aan de draaivariabelen, de waarde van de sliders meegeeft. Het is praktisch om in die functie eerst de kubus te laten stoppen. Om de waarden uit de slider goed over te brengen meoten we er voor zorgen dat de waarde wordt omgezet naar een heel getal: dit is in dit geval de functie parseInt().

De 3d-eigenschappen worden door enkele browsers slechts met een pre-fix verzorgd. Je kunt Brackets of andere editors uitbreiden met prefix-extensies. In dit geval is dat Autoprefixr.
Omdat ook met Javascript gestyled wordt, moet de style-eigenschap ook daar worden aangepast. Dit gaat met if-statements. Deze gaan na of de browser de transform-eigenschap kent (!=='undefined') voordat de stijl wordt uitgevoerd.