Fix cube rotation in Device Orientation API demo

[Macil]

In the Device Orientation API demo, the way the cube rotates as you rotate your device is very unintuitive, which might suggest to the user that the device orientation API or their phone's sensors aren't very accurate or have fundamental limitations. This PR fixes this issue, making the cube's rotation much more intuitive and better showing off the power of the device orientation API. It feels a lot cooler to use with this change.

This PR fixes these kinds of issues:

• If you start out holding your phone flat with the screen facing up, and then tilt the bottom of the screen downwards, the cube's top face rotates away from you, as if the cube were staying still behind the phone and you moved the camera down to look at it from the side. This is cool. But if instead you move the left or right side of the phone downward, then the cube spins in the wrong direction.
• If you hold your phone with the screen vertical, then the cube is extremely sensitive to motion and spins unpredictably. (This problem originally made me think that my phone's sensors didn't work in the vertical position, and made me stop considering using the device orientation API until I later saw a different demo without this issue.)
• If you hold your phone flat with the screen facing up and rotate your phone on the Z axis (so that the screen stays facing up), the cube appears as if it's staying still behind your rotating phone. This is way cool. But if you hold your phone at any other angle, and then rotate your phone similarly, the cube rotates unpredictably instead of appearing as if it's staying still behind the phone.

I applied the tips from https://dev.opera.com/articles/w3c-device-orientation-usage/ to correct the cube rotation. It does add a chunk of matrix math code to an otherwise simple demo page implementation, but I think it's really worth it.

Here's a link to the to improved demo so you can try it easily: https://macil.github.io/HTML5-API-demos/demos/device-orientation-api-demo.html. You can see major improvements if you test with a phone held with its screen held vertically, or if you hold the phone at an angle and then rotate the screen while keeping it within the same plane. In both cases, the old code causes the cube to spontaneously rotate faces out of view, while the new code keeps a consistent view of the cube as if it's staying still in space behind your screen.

This PR also has a separate commit to change the cube to be less transparent since I had a lot of trouble telling apart the front and back faces and seeing it as a cube.

[hello-smile6]

Please implement this.