Jquery CSS转换和转换：立方体的一侧不显示

我正在尝试使用CSS3和jQuery构建一个3D立方体。有一行较小的图标（在立方体下方）与立方体两侧显示的较大图标交互。当一个较小的图标被“点击”时，立方体将旋转并显示出与之重合的较大图标。除了“鸟”的形象，每一面都起作用。 不是坐在立方体的顶部，而是坐在中间，在立方体的所有侧面后面。我已经逐行阅读了我所有的代码，无法理解这一点。我错过了一些非常简单的东西吗？其他人能看到我遗漏了什么吗？多谢各位

http://codepen.io/treuther/pen/NdKPdR

var init=function（）{
var box=document.querySelector（“#cube”）.children[0]，
showPanelButtons=document.querySelectorAll（“#显示按钮输入”），
panelClassName='显示正面'，
onButtonClick=函数（事件）{
box.removeClassName（panelClassName）；
panelClassName=event.target.className；
box.addClassName（panelClassName）；
};
对于（变量i=0，len=showPanelButtons.length；i
#立方体{
宽度：236px；
高度：236px；
位置：相对位置；
保证金：0自动40px；
-webkit透视图：1000px；
-moz透视图：1000px；
-o-透视图：1000px；
透视图：1000px；
}
#显示按钮{
文本对齐：居中；
}
#翻转图形{
显示：块；
位置：绝对位置；
宽度：236px；
高度：236px；
边框：2件纯黑；
}
#翻转{
宽度：100%；
身高：100%；
位置：绝对位置；
-webkit变换样式：保留-3d；
-moz变换样式：preserve-3d；
-o变换样式：preserve-3d；
变换样式：保留-3d；
-webkit转换：-webkit转换1s；
-moz变换：moz变换1s；
-o-转变：-o-转变1s；
转变：转变1s；
}
#翻转，正面{
-webkit转换：translateZ（119px）；
-moz变换：translateZ（119px）；
-o变换：translateZ（119px）；
转化：translateZ（119px）；
}
#翻过来{
-webkit变换：rotateX（-180度）translateZ（119px）；
-moz变换：rotateX（-180度）translateZ（119px）；
-o变换：旋转（-180度）平移（119px）；
变换：rotateX（-180度）translateZ（119px）；
}
#翻转，对{
-webkit变换：旋转（90度）平移（119px）；
-莫兹变换：旋转（90度）平移（119px）；
-o变换：旋转（90度）平移（119px）；
变换：旋转（90度）平移（119px）；
}
#翻转，向左{
-webkit变换：旋转（-90度）translateZ（119px）；
-莫兹变换：旋转（-90度）平移Z（119px）；
-o变换：旋转（-90度）平移Z（119px）；
变换：旋转（-90度）平移Z（119px）；
}
#fip.顶部{
-webkit变换：rotateX（90度）translateZ（119像素）；
-moz变换：rotateX（90度）translateZ（119像素）；
-o变换：旋转（90度）平移（119px）；
变换：rotateX（90度）translateZ（119px）；
}
#翻转，底部{
-webkit变换：rotateX（-90度）translateZ（119px）；
-moz变换：rotateX（-90度）translateZ（119px）；
-o变换：旋转（-90度）平移（119px）；
变换：rotateX（-90度）translateZ（119px）；
}
#倒装表演{
-webkit转换：translateZ（-119px）；
-moz变换：translateZ（-119px）；
-ms变换：translateZ（-119px）；
-o变换：translateZ（-119px）；
转换：translateZ（-119px）；
}
#倒装表演{
-webkit变换：translateZ（-119px）rotateX（180度）；
-莫兹变换：translateZ（-119px）rotateX（180度）；
-ms变换：translateZ（-119px）rotateX（180度）；
-o变换：translateZ（-119px）rotateX（180度）；
变换：translateZ（-119px）rotateX（180度）；
}
#向右翻转{
-webkit变换：translateZ（-119px）rotateY（-90度）；
-莫兹变换：translateZ（-119px）rotateY（-90度）；
-ms变换：translateZ（-119px）rotateY（-90度）；
-o变换：translateZ（-119px）rotateY（-90度）；
变换：translateZ（-119px）rotateY（-90度）；
}
#向左翻转{
-webkit变换：translateZ（-119px）旋转（90度）；
-莫兹变换：translateZ（-119px）rotateY（90度）；
-ms变换：translateZ（-119px）rotateY（90度）；
-o变换：translateZ（-119px）rotateY（90度）；
变换：translateZ（-119px）rotateY（90度）；
}
#翻盖{
-webkit变换：translateZ（-119px）rotateX（-90度）；
-莫兹变换：translateZ（-119px）rotateX（-90度）；
-ms变换：translateZ（-119px）rotateX（-90度）；
-o变换：translateZ（-119px）rotateX（-90度）；
变换：translateZ（-119px）rotateX（-90度）；
}
#倒装表演{
-webkit变换：translateZ（-119px）rotateX（90度）；
-莫兹变换：translateZ（-119px）rotateX（90度）；
-ms变换：translateZ（-119px）rotateX（90度）；
-o变换：translateZ（-119px）rotateX（90度）；
变换：translateZ（-119px）rotateX（90度）；
}