css - webkit 変換 - アニメーション化された立方体の非表示の側面にテキストが表示され、側面間に隙間があるのはなぜですか?

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

ギャップについてはわかりませんが、に適用-webkit-backface-visibility: hiddenすると.face、表示されるテキストの問題が整理されるはずです。

このブログ投稿の最後に、ギャップを埋めるのに役立つかもしれない良い立方体の例がありtranslateXます。