小伙伴們，根據(jù)變形transform和過渡transition等內(nèi)容，實(shí)現(xiàn)如下3D旋轉(zhuǎn)動畫下拉導(dǎo)航
案例在線演示地址：http://codepen.io/airen/pen/icFba
1、通過CSS3的@font-face屬性引入本地字體
2、調(diào)用自定義的字體
3、設(shè)置3D舞臺布景
4、給3D舞臺布景設(shè)置過渡動畫效果
5、給不是當(dāng)前狀態(tài)的3D舞臺的懸浮與聚焦?fàn)顟B(tài)設(shè)置變形效果
6、給3D舞臺中“.three-d-box”設(shè)置過渡與變形效果
7、給導(dǎo)航設(shè)置3D前，與3D后變形效果
8、設(shè)置導(dǎo)航當(dāng)前狀態(tài)與懸浮狀態(tài)下的背景效果
9、顯示下拉導(dǎo)航菜單，并其設(shè)置一個變形效果
提示1：
使用@font-face引入本地字體，本地字體的路徑為：
http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu
同時(shí)提供自定義字體：
“sansation_regular-webfont.eot”、“sansation_regular-webfont.woff”、“sansation_regular-webfont.ttf”和“sansation_regular-webfont.svg”
提示2：
通過font-family調(diào)用自定義的字體名“sansationregular”。
提示3：
在元素”.three-d”上使用“perspective”給元素設(shè)置3D舞臺布景，并且將其值設(shè)置為”200”
提示4：
通過transition給3D舞臺設(shè)置過渡動畫，設(shè)置的參數(shù)為所有屬性“all”,過渡時(shí)間持續(xù)“0.07s”，使用的過渡函數(shù)為“linear”。
提示5：
給不是當(dāng)前狀態(tài)的3D舞臺的懸浮與聚焦?fàn)顟B(tài)設(shè)置旋轉(zhuǎn)效果，也就是“.three-d:not(.active):hover”和“.three-d:not(.active):focus”狀態(tài)下的“.three-d-box”設(shè)置z軸位移“-25px”，X軸旋轉(zhuǎn)“90deg”。
提示6：
給3D舞臺中的“.three-d-box”元素設(shè)置過渡效果，并且對其Z設(shè)置一個“-25px”旋轉(zhuǎn)。
提示7：
在.front”元素上設(shè)置X軸的旋轉(zhuǎn)，旋轉(zhuǎn)度為0，同時(shí)給Z軸位移25px。另外給“.back”元素上設(shè)置X軸的旋轉(zhuǎn)，旋轉(zhuǎn)度為-90deg，同時(shí)Z軸位移25px。
提示8：
通過CSS的漸變與背景尺寸實(shí)現(xiàn)導(dǎo)航當(dāng)前狀態(tài)與懸浮狀態(tài)下的斑紋背景效果。
請驗(yàn)證，完成請求
由于請求次數(shù)過多，請先驗(yàn)證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報(bào)
