3d SVG image showing through another

Question

I was trying to make a basic 3d shape in css and html, it uses CSS3 transforms and I have animated it to rotate so you can see all the sides. I have managed to create the SVG images in code myself and to position them but when the image rotates some of the inner svg images show through one another.

Here is a code pen, I am using the latest version of Google chrome:

http://codepen.io/anon/pen/Bpums

Any help with this would be greatly appreciated.

Thanks

Answer 1

Magical suggestion: you can sometimes get rid of these glitches by adding -webkit-backface-visibility:hidden; but then you need to do your transforms so that the visible parts are the front-face, not the back face :-) Some of your visible surfaces are the back face.