這段時間比較忙，很久沒在這裡分享一些漂亮的html5和css3資源了，今天起的早，看到一款很不錯的css3 3d選單，覺得非常上眼，就將它分享給大家，順便來分析一下實現的原始碼。下面是效果圖：
看了效果圖是不是覺得它是一副麻將，對，第一眼我也認為是用css3寫的麻將特效，結果我錯了，它只是長得比較像而已。
另外，你也可以在這裡直接檢視選單的demo演示。
接下來再分析一下實現這款3d選單的源**。
**主要由html和css3組成，應該說還是比較簡單的。
首先是html**：
<這裡用了標準的ul li列表來構建選單的html框架，層次非常清晰。ul>
<
li>
<
a class
='list-item'
href
=''>
<
i class
='icon-reorder'
>
i>
a>
li>
<
li>
<
a class
='list-item'
href
=''>
<
i class
='icon-th-large'
>
i>
a>
li>
<
li>
<
a class
='list-item'
href
=''>
<
i class
='icon-bar-chart'
>
i>
a>
li>
<
li>
<
a class
='list-item'
href
=''>
<
i class
='icon-tasks'
>
i>
a>
li>
<
li>
<
a class
='list-item'
href
=''>
<
i class
='icon-bell'
>
i>
a>
li>
<
li>
<
a class
='list-item'
href
=''>
<
i class
='icon-archive'
>
i>
a>
li>
<
li>
<
a class
='list-item'
href
=''>
<
i class
='icon-comment'
>
i>
a>
li>
<
li>
<
a class
='list-item'
href
=''>
<
i class
='icon-sitemap'
>
i>
a>
li>
<
li>
<
a class
='list-item'
href
=''>
<
i class
='icon-thumbs-up'
>
i>
a>
li>
<
li>
<
a class
='list-item'
href
=''>
<
i class
='icon-tumblr'
>
i>
a>
li>
ul>
接下來重點是css**，如何用css3的特性來實現選單的側躺和陰影效果，從來讓其看起來呈3d的狀態。
ul上面的這幾行**很關鍵，我們也可以看出用了css3的transform屬性的rotate()實現選單整體旋轉一定角度，然後用skew()讓選單傾斜乙個角度，這樣選單就開始有3d立體的感覺了。
接下來是每乙個選單項的樣式：
.list-item .list-item:hover .list-item:hover:before, .list-item:hover:after .list-item:hover:before .list-item:hover:after .list-item:before, .list-item:after .list-item:after .list-item:before我們可以看到用了shadow實現每乙個選單項都有投影，至此，整個選單的3d效果就已經渲染完了。
另外就是滑鼠滑過選單項的效果，利用了css3的動畫特性讓選單項背景色漸變，形成凸起的效果。
一款非常棒的純CSS3 3D選單演示及製作教程
這段時間比較忙，很久沒在這裡分享一些漂亮的html5和css3資源了，今天起的早，看到一款很不錯的css3 3d選單，覺得非常上眼，就將它分享給大家，順便來分析一下實現的原始碼。下面是效果圖 看了效果圖是不是覺得它是一副麻將，對，第一眼我也認為是用css3寫的麻將特效，結果我錯了，它只是長得比較像而...
一款純css3實現的動畫按鈕
今天給大家分享一款純css3實現的動畫按鈕。第一排的按鈕當滑鼠經過的背景色動畫切換，圖示從右側飛入，第二排的按鈕當滑鼠經過的時候邊框動畫切換，圖示右側飛入，效果非常好，一起看下效果圖 實現的 html div class black a href class btn span become a me...
一款純css3實現的翻轉按鈕
之前為大家介紹了好多純css3實現的很漂亮的按鈕。今天小編要給各再分享一款純css3實現的翻轉按鈕。實現中給出了兩種的翻轉特效，一種是基於按扭的左邊緣為中心線，另一種是基於按鈕的中間為中心線。我們一起看下效果圖 實現的 html article a target blank class btn fo...