Dat webpagina's allang niet meer uitsluitend om HTML draaien moge duidelijk zijn. Er komen steeds meer en betere technieken om informatie op fraaie en prettige wijze te tonen.
Een van die technieken is canvas. Canvas wordt door zo ongeveer alle browsers ondersteund. Op eentje na. Helaas is dat nou net die browser die nog steeds 75% van de markt 'regeert'.
Peter Nederlof laat op het LostBoys Blog zien waartoe canvas in staat is. Hij heeft een 3D engine ontwikkeld boven op het in essentie 2D canvas. Zijn verhaal wordt geillustreerd met een mooie demo.
Hierdoor geinspireerd wilde ik eens kijken hoever de iPhone met zijn excellente Safari browser mee kan komen.
Safari ondersteunt canvas en bovengenoemde demo werkt dan ook op de iPhone, maar wat betreft snelheid valt er nog wel het een en ander op af te dingen.
Safari op de iPhone kent gelukkig nog enkele zeer interessante nieuwe toevoegingen. Te weten: CSS-Animations en CSS-transforms.
Gebruikmakend van die 2 technieken kwamen we vrij eenvoudig tot de volgende demo (let op: enkel iPhone of iPodTouch).
In deze demo gebruiken we CSS-Transforms om de 3 vlakken met foto's in de 3D ruimte te positioneren.
Daarnaast gebruiken we CSS-Animations om te animeren van de ene ruimtelijke stand naar de andere.