Ok, found the answer by learning more about 3d transforms. It came to applying a -webkit-transform-style attribute to the parent transformed element so that the child would be able to use the preserved 3d state of its parent.
Adding this line solves my problem:
#cube {
...
-webkit-transform-style: preserve-3d;
}
Here's an updated jsfiddle with the change applied: http://jsfiddle.net/s6jwC/3/