In this posting I will again be using WebGL.  However as opposed to just drawing a triangle and doing a gradient fill, which you can see here.  Gradient Triangle.

The code listed below will use WebGL to draw a cube and make it rotate.

WebGL Rotating a Cube

The cube has solid face colors, each color different so you can easily see the rotation of the cube faces.  In the var boxVertices, you can see that we are drawing two triangles for each cube face.

In the second part of the tuple the RGB values are specified, and they are listed as a range of luminance from 0.0 to 1.0.  It is a little different than how colors are represented in most other programs.  You normally see the RGB values shown as a value from 0 to 255, i.e. 2^8. It is just one of the fun things about working with WebGL.

The example uses a JavaScript library available from The library will handle the matrix math that are required to rotate the cube.

Link to a working example.  Rotating a Cube

The code should work on most modern browsers including iPhones.  The speed the cube is being rotated can be adjusted by changing the value of 6 in the line below. Change 6 to a lower value to rotate the cube faster or higher value to rotate slower.