On YouTube I saw a movie on the Aves Web-Gaming Engine (by dextrose), which is a web-gaming engine written in HTML, CSS and JavaScript. Inspired by it, I tried two experiments with isometric projection. Isometric projection is a way of constructing a 3D world in 2D, it requires rotation and displacement of objects to achieve this effect. I've seen it being called 2.5D.

First I started with a regular cube which shows all sides on the screen. I've added a little transparency to each face, to be able to see all 6 faces on the screen. This is not done using the new HTML5 canvas element, but using regular div's and css-transform's:

Next, of course, was an experiment with a map, which needs a little JavaScript in the mix. The experiment uses a tiny bit of jQuery to dynamically insert div's into the DOM. The experiment uses a small Array of String's with (g=grass, w=water and s=stone) characters, which indicate the tile type:

Next up, which took quite a bit more effort, but still belongs in the Isometric experiments is my Rubik's Cube implementation. I got the idea because I recently came across this site, which shows appearences of the Cube in movie. Good sites to read on the Rubik's Cube are: Beginner solution to the Rubik's Cube and Speedcubing.

The implementation is currently fairly bare-bones, no cool transformations, but it does allow you to move the cube's faces, using a familiar notation. I've pushed the code to GitHub.