摆弄一个翻转盒子 http://jsfiddle.net/L3724xLh/1/
这与你开始的地方有很大不同，但让我发布我的 CSS 并向你展示小提琴，然后我将编辑更长的解释，解释其工作方式和原因：
HTML
<section class="container">
<nav id="nav-box" class="show-front">
<div class="front">
<a href="#">Show Bottom</a>
</div>
<div class="bottom">
<a href="#">Show Back</a></div>
<div class="back">
<a href="#">Show Top</a></div>
<div class="top">
<a href="#">Show Front</a></div>
</nav>
</section>
CSS
.container {
position: relative;
perspective: 1000px;
transform: scale(0.95);
}
#nav-box {
width: 100%;
height: 50px;
position: absolute;
transform-origin: center center;
transform-style: preserve-3d;
transition: transform 0.5s;
}
#nav-box div {
width: 100%;
height: 50px;
display: block;
position: absolute;
transition: background-color 0.5s;
}
#nav-box .front { transform: rotateX( 0deg ) translateZ( 25px ); background-color: #ccc; }
#nav-box .back { transform: rotateX( 180deg ) translateZ( 25px ); background-color: #ccc; }
#nav-box .top { transform: rotateX( 90deg ) translateZ( 25px ); background-color: #ccc; }
#nav-box .bottom { transform: rotateX( -90deg ) translateZ( 25px ); background-color: #ccc; }
#nav-box.show-front { transform: rotateY( 0deg ); }
#nav-box.show-front .bottom { background-color: #a0a0a0; }
#nav-box.show-front .top { background-color: #e0e0e0; }
#nav-box.show-back { transform: rotateX( -180deg ); }
#nav-box.show-back .bottom { background-color: #e0e0e0; }
#nav-box.show-back .top { background-color: #a0a0a0; }
#nav-box.show-top { transform: rotateX( -90deg ); }
#nav-box.show-top .front { background-color: #a0a0a0; }
#nav-box.show-top .back { background-color: #e0e0e0; }
#nav-box.show-bottom { transform: rotateX( 90deg ); }
#nav-box.show-bottom .front { background-color: #e0e0e0; }
#nav-box.show-bottom .back { background-color: #a0a0a0; }
HTML/CSS 的解释
设置我们的盒子
我不想说，你开始以错误的方式思考这个问题。你这样做是为了“我怎样才能把这四个面当作一个盒子”而不是“如何用 CSS 制作一个盒子？”
那么我们就来学习一下如何制作一个盒子吧。
首先，我们建立一个box容器。既然这是一个导航框，我们就称它为nav-box。我们应用的所有变换（除了阴影，我们稍后会讲到）都将在我们的nav-box.
我们的规则nav-box将决定它作为一个对象的行为方式。我们特别讨论两个：transform-origin and transform-style
transform-origin默认为center center，但我想在这里把它叫出来。这基本上是要告诉我们的盒子：嘿，我们需要你围绕你的绝对中心转动。如果我们将其设置为transform-origin: center bottom' it would look like the box is spinning around its bottom edge. 中心顶部`，它会绕其顶部边缘旋转。但我认为这不是你想要的。
transform-style需要设置为preserve-3d。这样做的目的是指示浏览器不要对带有以下内容的元素大惊小怪transform在它下面。其他选项包括flat它告诉浏览器忽略其下方的旋转。我们要设置的原因preserve-3d on our nav-box这是为了确保transforms当我们应用到盒子侧面时，我们会被保留transform家长。整洁的东西，是吧？
设置我们的双方
我们把我们的身边当作我们的孩子nav-box并按照它们应该使用的顺序放置它们rotateX:
-
0前轮旋转
-
180deg背部
-
-90deg对于底部
-
90deg对于顶部
我们现在还可以设置左侧和右侧.left { transform: rotateY(-90deg); } .right { rotateY(90deg); }。请注意，我们使用了Y这两个例子的轴。
其次，我们设置一个translateZ的价值25px。那么这到底是在做什么？它告诉我们的盒子需要移动25px从父级的中心相对于它们各自的旋转。我们为什么选择25px？因为它正好是我们每个盒子高度的一半。这意味着它将与任一边缘的侧面很好地齐平。
然后是有趣的部分：
我们根据盒子的位置和面向屏幕的内容来对盒子进行着色。背景颜色与我们显示的框的哪一侧有关show-front, show-back等。底部的一侧变暗，顶部的一侧变亮。我只是喜欢这一点——完全不需要完成这项任务，但让它看起来更现实一点。
希望有帮助！
IE 更新
小提琴示例 http://jsfiddle.net/L3724xLh/3/
因此，一旦我们完成了 IE 的修复，就没有什么好看的了，但它就是这样。全部preserve-3d正在做的是当我们旋转容器时为您应用变换，而不是压平它们。如果我们不能使用preserve-3d，我们必须根据总旋转量来计算。
这个解决方案就是这样做的。我不会深入讨论这一点，而是强调这需要多少 JavaScript，并强调.rewind class:
#nav-box.rewind div {
backface-visibility: hidden;
}
因为我们必须手动倒回此解决方案，所以我们必须防止在错误的时间应用 z 索引重新排序。那就是那里backface-visibility进来。
在 IE 中显示深度的示例 http://jsfiddle.net/L3724xLh/9/
另一个例子，不需要rewind class http://jsfiddle.net/L3724xLh/8/
希望能解决IE为你。
