webkit transforms - why does my animated cube show the text on the hidden sides, and have gaps between the sides?

Question

I am trying to make a 3d transition/transformation so that when a link is click a bar run the length of my website rotates to reveal different options. However it currently looks very untidy, in that each face of the cube has gaps around it, and you can see each face of the cube, regardless of whether it not view (i.e when it is animating you can see text you should be able to see, it also gives the impression that bar grows in width when animating.

Is there anyway I can tidy this up?

I have made a fiddle which can be found here

Answer 1

I’m not sure about the gaps, but applying -webkit-backface-visibility: hidden to .face should sort out the visible text issue.

There‘s a good cube example at the end of this blog post which might help with the gaps — maybe you need to use translateX to get the faces into the right position?