效果如下圖：

HTML代碼 

 導航菜單的鏈接，在這(zhè)裡(lǐ)我們添加了一些額外(wài)的span元素來(lái)幫助實現(xiàn)3D效果：

<ul class="menu">
    <li>
	<a href="#" class="three-d ">網站(zhàn)首頁
	    <span class="three-d-box">
		<span class="front">網站(zhàn)首頁</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鏈接标記旁邊是(shì)一系列的span元素，動畫演示過程中，它将用來(lái)表現(xiàn)3D立方體(tǐ)的“正面”和“背面”。這(zhè)些span裡(lǐ)的文字和a鏈接裡(lǐ)的文字是(shì)一緻的。

CSS代碼 

 這(zhè)個動畫的過程就(jiù)是(shì)實現(xiàn)3D變換和元素位置變化(huà)。但(dàn)實際上A鏈接是(shì)沒有移動的，動的是(shì)span标簽，而且是(shì)最外(wài)層的span标簽，內(nèi)部的span标簽被初始化(huà)在它的位置上，以後就(jiù)不(bù)做任何變動。每個元素都可(kě)以向上翻，并要(yào)翻回來(lái)，我們使用的是(shì)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翻轉動畫導航