效果如下图：

HTML代码 

 导航菜单的链接，在这里我们添加了一些额外的span元素来帮助实现3D效果：

<ul class="menu">
    <li>
	<a href="#" class="three-d ">网站首页
	    <span class="three-d-box">
		<span class="front">网站首页</span>
		<span class="back">home</span>
	    </span>
	</a>
    </li>
    <li>
	<a href="#" class="three-d ">关于我们
	    <span class="three-d-box ">
		<span class="front">关于我们</span>
		<span class="back">about us</span>
	    </span>
	</a>
    </li>
    <li>
	<a href="#" class="three-d ">产品中心
	    <span class="three-d-box ">
		<span class="front">产品中心</span>
		<span class="back">product</span>
    	    </span>
	</a>
   </li>
</ul>

在a链接标记旁边是一系列的span元素，动画演示过程中，它将用来表现3D立方体的“正面”和“背面”。这些span里的文字和a链接里的文字是一致的。

CSS代码 

 这个动画的过程就是实现3D变换和元素位置变化。但实际上A链接是没有移动的，动的是span标签，而且是最外层的span标签，内部的span标签被初始化在它的位置上，以后就不做任何变动。每个元素都可以向上翻，并要翻回来，我们使用的是css transforms。

.menu {
    display: flex;
    background: #09F;
}
.menu li {
    display: inline-block;
    width:10%;
}
.menu li a {
    color: #fff;
    display: block;
    text-decoration: none;
    font-family: 'Microsoft Yahei', Arial, sans-serif;
    text-transform: uppercase;
    text-align: center;
    line-height: 20px;
    font-size: 20px;
    padding: 15px 10px;
}

.three-d {
    perspective: 200px;
    transition: all .07s linear;
    position: relative;
    cursor: pointer;
}

.three-d:hover .three-d-box, 
.three-d:focus .three-d-box {
    transform: translateZ(-25px) rotateX(90deg);
}
.three-d-box {
    transition: all .3s ease-out;
    transform: translatez(-25px);
    transform-style: preserve-3d;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.front {
    transform: rotatex(0deg) translatez(25px);
}
.back {
    transform: rotatex(-90deg) translatez(25px);
}
.front, .back {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #09F;
    padding: 15px 10px;
    color: #FFF;
    pointer-events: none;
    box-sizing: border-box;
}

CSS3D翻转动画    CSS3 3D翻转动画导航