周末快樂哈，今天來看一個純CSS3實現的3d翻轉菜單。3d響應式菜單，希望對大家有所幫助。
html文件例如以下
<ul class="menu">
<li><a title="站點首頁" href="#">站點首頁</a>
</li>
<li><a title="行業洞察" href="#">行業洞察</a>
</li>
<li><a class="cur" title="解決方式" href="#">解決方式</a>
</li>
<li><a title="產品商場" href="#">產品商場</a>
</li>
<li><a title="技術支持" href="#">技術支持</a>
</li>
<li><a title="媒體中心" href="#">媒體中心</a>
</li>
<li><a title="增加我們" href="#">增加我們</a>
</li>
<li><a title="關於我們" href="#">關於我們</a>
</li>
</ul>然后是css，在codepen里我使用了css reset和prefix-free。在線案例里。使用了簡單粗暴的重置，大家見諒。
在整個案例中。3d翻轉的核心在於兩點。一是3d盒子的繪制，我們利用:before，:after兩個偽對象各做一個面。然后X軸負旋轉形成盒子；二是hover翻轉的實現。hover之后對整個盒子作翻轉（X軸正旋轉）。實現原理例如以下圖所看到的。
/*
* 簡單粗暴的CSS重置
* */
*, *:before, *:after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/*
* 菜單設置。寬、高、位置、陰影
* */
.menu {
list-style: none;
width: 960px;
height: 40px;
margin: 50px auto;
box-shadow: 0 0 4px rgba(0, 0, 0, .5);
}
/*
* 菜單項設置
* fll，li脫離標准流。形成水平菜單
* */
.menu li {
float: left;
}
/*
* 菜單項鏈接設置，關鍵設置，菜單的主要表現體如今這里
* 設置寬、高、背景色、文字大小、文字顏色、文字居中、文字裝飾、邊框
* transition過渡
* 3d transform屬性，transform-style、transform-origin
* 部分代碼寫到了組合選擇器里
* */
.menu li a {
display: inline-block;
color: #666;
background-color: #eee;
text-decoration: none;
position: relative;
}
/*
* before和after偽類形成兩個面。我們須要給他們不同的顏色、背景色。不同的旋轉角度
* */
.menu li a::before {
content: attr(title);
color: #888;
background-color: #aaa;
position: absolute;
left: 0;
top: 0;
transform: rotateX(-90deg);
}
.menu li a::after {
content: attr(title);
color: #fff;
background-color: #666;
position: absolute;
left: 0;
top: 0;
transform: rotateX(-180deg);
}
.menu li a, .menu li a::before, .menu li a::after {
width: 120px;
height: 40px;
text-align: center;
font-size: 14px;
line-height: 40px;
border: 1px solid #ddd;
border-width: 0 1px 0 0;
transition: all 1s;
transform-style: preserve-3d;
transform-origin: center center -20px;
}
/*
* hover之后表現
* */
.menu li:hover a, .menu li a.cur {
transform: rotateX(178deg);
}
/*
* 響應式布局
* 我們須要幾個狀態，900+，768-900。480-768,320-480,320-
* 不同狀態下，我們主要實現菜單項的不同寬度
* 768-900，整個菜單鋪滿屏幕，1行8列
* */
@media (max-width: 900px) {
.menu {
width: 100%;
height: 40px;
}
.menu li {
width: 12.5%;
}
.menu li a, .menu li a::before, .menu li a::after {
width: 100%;
}
}
/*
* 響應式布局
* 480-768，整個菜單鋪滿屏幕，2行4列
* */
@media (max-width: 768px) {
.menu {
width: 100%;
height: 80px;
}
.menu li {
width: 25%;
}
.menu li a, .menu li a::before, .menu li a::after {
width: 100%;
border-width: 0 1px 1px 0;
}
}
/*
* 響應式布局
* 320-480，整個菜單鋪滿屏幕，4行2列
* */
@media (max-width: 480px) {
.menu {
width: 100%;
height: 160px;
}
.menu li {
width: 50%;
}
.menu li a, .menu li a::before, .menu li a::after {
width: 100%;
border-width: 0 1px 1px 0;
}
}
/*
* 響應式布局
* 320-，整個菜單鋪滿屏幕，8行1列
* */
@media (max-width: 320px) {
.menu {
width: 100%;
height: 320px;
}
.menu li {
width: 100%;
}
.menu li a, .menu li a::before, .menu li a::after {
width: 100%;
border-width: 0 0 1px 0;
}
}
That's it, Thank you.
---------------------------------------------------------------
前端開發whqet，關注web前端開發技術。分享網頁相關資源。
---------------------------------------------------------------