<li><a href="#" class="three-d active">
Home
<span class="three-d-box"><span class="front">Home</span><span class="back">Home</span></span>
</a></li>
front和back是完全重叠的，只是把back绕x轴旋转隐藏了而已。a标签的空间大小是由Home撑起来的,再者span的大小已经完全100%父元素a ，浮动没任何效果。
a的内容决定了a的宽度，在样式中设置了padding,padding是根据内容来确定li元素宽度，因为没有显示设置a的width，你可以将a里面home看作一个参照物,front和back的样式布局都是100%填充a，字体大小和颜色都继承自a,因此你看到的文本完全覆盖了a中的home,你看到的文本是front，在.three-d-box选择器中translateZ(-25)将字体缩小，但后面的front和back选择器都用translateZ(25px)把内容放大同样大小,所以最后还是完美契合.
同问，求解！！