een kubus met interactie

met javascript en CSS-transities
In deze tutorial wordt een kubus gemaakt, die zich 3D-dimensionaal presenteert. De bezoeker kan het draaien van de kubus beïnvloeden.
Er wordt gebruik gemaakt van 3D-transformaties. In IE (voor versie 10) en Opera wordt dit nog niet ondersteund. Zie ook: https://developer.mozilla.org/en-US/docs/CSS/perspective Werk zoveel als het kan met eigen variablenamen, functienamen.
Een mogelijk resultaat zie je hier:

de DOM

De kubus bevat 6 vlakken. Elk vlak is een sectie binnen de kubus. Deze krijgt een class mee en heeft een id.
Deze vlakken zitten in een div met de id kubus.
Deze totale kubus zet je weer in een container-div.

de kubus in perspectief

Veel van de realistatie van de kubus ligt in het stijlblad.
Je kunt hierover een en ander lezen in https://www.webkit.org/blog/386/3d-transforms/ In de ondersteuneende browsers wordt gewerkt met 'perspective".
Bedenk dat er voor de verschillende browsers prefixes vereist zijn. Wellicht kan http://prefixr.com/ je hierbij van dienst zijn.

de kubus als een geheel opnemen

De kubus krijgt hoogte een breedte in pixels mee. Firefox heeft problemen met percentages.
Om de 6 vlakken van de kubus ook in 3D te zetten, krijgt de transform-style de waarde preserve-3d mee.

vlakken afmetingen en rand geven

De afmetingen van de vlakken zijn gelijk. Vandaar dat ze in de DOM ook een klasse hebben meegekregen.
Omdat onze vlakken uit afbeeldingen bestaan, geven we ook de opdracht deze passend te maken.
Door de eigenschappen box-sizing: border-box, kun je de vlakken een rand geven zonder dat de buitenafmeting toeneemt. Het standaard box-model doet dat immers wel. Controleer dit door met de waarden van de dikte van de rand te spelen.

de vlakken in positie brengen

De vlakken van de 'kubus' liggen nu plat, dierect op elkaar. Ze moeten nu zowel gedraaid worden als verschoven. De verdraaiïng is zowel over de Y-as als over de X-as. De verplaatsing gaat langs de Z-as. De achterafbeelding wordt bovendien nog 180o gedraaid, zodat hij in dezelfde positie staat als de linker en rechter vlakken.
(In het screenshot is voor elk vlak de stijlregel in 1 regel geschreven.)
Om het resultaat een beetje te kunnen zien wordt ook de hele kubus #kubus even verdraaid en kun je met de verschillende waarden van de afzonderlijke vlakken spelen om te zien of je het begrijpt.
Als het goed is komt de kubus nu in beeld! In dit voorbeeld is de kubus 10 graden over de X-as, 30 graden over de Y-as en 20 graden over de Z-as verdraaid. Bij dit laatste blijkt het wel erg handig om van http://prefixr.com/ gebruikt te maken.

Als je de laatste stijlregels (44 tot 50) door die alleen voor Chrome/Safari werkt, door Prefixr haalt, krijg je vele stijlregels. Je ziet hironder een deel van die regels.

script om de kubus blijvend te verdraaien: script koppelen

Het plan is om via een setInterval() de kubus blijvend te laten draaien.
Maak hiervoor een nieuw javascript-document aan en koppel deze aan jouw webpagina.
We amken daar variabelen aan voor de draaiïng over elk van de 3 ruimtelijke assen: draaiX, draaiY en draaiZ.
Ook wordt de variable kubus gedeclareerd, de kubus zal worden. Hij wordt nu buiten fucnties gedeclareerd, zodat ze bruikbaar zijn in de latere fucnties.
Ook wordt een eventListener gemaakt, die controleert of het document geladen is. Daarna kan de kubus-variabele pas gekoppeld worden. In eerdere tutorials maakten we een window.onload = init declaratie, maar deze werkwijze is natuurlijk net zo elegant.
In de aangeroepen functie wordt met een console.log(kubus) getest of alles werkt. Test dit even. Je krijgt in de console dan de hele div als object.

de omzet-functie

Omdat de browser zo hun verschillende methoden hebben om de transform-eigenschappen via javascript te laten aansturen, maken we een transform-functie.
Deze functie krijgt een element en een waarde als input en zet deze in de css-eigenschappen van de kubus om.
Voor elke browser contoleert deze omzet functie of de transform-eigenschap herkend wordt. Als dat het geval is kent hij deze de ingevoegde waaarde toe.
Zo wordt alles afgegaan. Als het niet meer herkend wordt, dan komt er een foutmelding.

De omzet-functie kun je vervolgens in de functie startScript() aanroepen met voorbeeldhoeken:
zetOm(kubus, 'rotateX(10deg) rotateY(20deg) rotateZ(-30deg)');
Probeer hier verschillende hoeken uit:
zetOm(kubus, 'rotateX(-20deg) rotateY(200deg) rotateZ(-30deg)');
zodat je een goed gevoel voor de ruimtelijke weergave van de kubus krijgt. Bedenk dat je de hoeken in een 'string' van drie hoeken opgeeft.

de setInterval()

De functie zetOm() moet herhaaldelijk worden aangeroepen, met andere waarden voor de draai-hoeken.
Hiervoor gaan we een functie schrijven, waarin de drie draaihoeken als variablen worden opgehoogd.
Indeze functie worden de variabelen in de zetOm-functie gegooid, waarbij de string 'rotateX(-20deg) rotateY(200deg) rotateZ(-30deg)' wordt opgeknipt en de getallen daar vervangen worden door de variabelen:

Hierna roep je met een setInterval deze functie herhaaldelijk op.
Je krijgt dan een doorlopend draaiende kubus te zien.

interactie

Het vervolg van deze opdracht gaat over het aanbrengen van verschillende vormen van interactiviteit aan deze pagina met kubus.
Wil je voor iPad/smartphone? Kijk dan eens bij http://quojs.tapquo.com/.
Je mag ook voor interactiveit op het web kiezen.
Het mooiste kun je gebruik maken van een slider om je wil aan de kubus op te leggen. In de html kun je de slider aanmaken met de input-tag: 
   <input type="range" min="-180" max="180">
Geef deze input-tag ook een id mee om hem straks in het script te kunnen aanwijzen!

jQuery

Onderaan het script kun je nog een jQuery script toevoegen.
Vergeet niet in de HTML een verwijzing naar jQuery te maken VOORDAT je eigen script wordt aangeroepen.
Terug in jouw script kun je via $(document).ready() weer een console.log laten testen om te zien of jQuery werkt en gelijk kijk je of het in strijd raakt met QuoJS.

Als de slider voor de x-richting als id bijvoorbeeld schuifjeX heet, dan kun je die met jQuery gewoon selecteren en er een on-change event uitlokken: 

$('#schuifjeX').on("change", function() {
	// hier de opdrachten voor de kubus
})

In plaats van de opdrachten voor de kubus kun je natuurlijk ook wel een console.log() plaatsen om te testen of het change-event wordt vastgesteld.
Hierna natuurlijk de opdrachten voor de kubus. Het lijkt mij het handigst om de kubus stil te zetten. Dit kan via een clearInterval() met tussen de haakjes de variabel, die de setInterval aanzette.
Vervolgens geef je de draaiïng van de kubus in de X-richting de waarde van jouw schuifje mee:
Dus als de slider voor de x-richting schuifjeX heet, en de kubus kubus heet en de variabele voor de draaiïng over de X=as draaiingX, dan geeft 
    draaiingX= $('#schuifjeX').val();
de waarde van het schuifje aan de variabele.
Dan zou 
zetOm(kubus, 'rotateX(' + draaiX + 'deg) rotateY(' + draaiY + 'deg) rotateZ(' + draaiZ + 'deg)');
de kubus naarr de ingevoerde waarde kunnen leiden.
De test werkt tot....
je daarna weer met een klik de automatische draai-functie van de kubus in werking stelt. Dan blijkt er een flnke bug op te treden. Dit komt doordat de waarde, die uit de 
$('#schuifjeX').val();
komt een string blijkt te zijn. Asl je daar dan warden aan toevoegt, wordt de string langer en in no-time staat daar 1522222222222222222... of iets dergelijks.
De kubus 'beweegt' navenant. Controleer dit met console.log() of nog beter door achter de slider de waarde van de draaiï af te drukken in het document!
Asl je daarvoor eht recept wil: een div aanmaken met een id, en deze via 
$('#naamId').text(draaiingX)
vullen.

parseInt()

De jQuery-method parseInt() kan een string weer naar een getal omzetten. Komt er daarna een ophoging van 2, dan wordt dat dus weer opgeteld in plaats van uitgebreid.
De bovenstaande opdracht dus omvatten met parseInt(): 
draaiingX= parseInt($('#schuifjeX').val());
en alles functioneert weer naar behoren.
Doe dit ook voor de overige draai-richtingen.