我曾經(jīng)向大家展示過閃光的logo，燃燒的火狐貍，多重嵌套動(dòng)畫等例子，今天，我們將要制作一個(gè)簡(jiǎn)單但非?？岬?D翻轉(zhuǎn)菜單。大家可以先看看實(shí)際效果，下面有效果截圖。

效果圖：

HTML代碼

HTML內(nèi)容是一些用作菜單的鏈接，我們?cè)诶锩嫣砑恿艘恍╊~外的SPAN標(biāo)記來幫助實(shí)現(xiàn)3D效果：

CSS代碼

這個(gè)動(dòng)畫的過程就是實(shí)現(xiàn)3D變換和元素位置變化。但實(shí)際上A鏈接是沒有移動(dòng)的，動(dòng)的是SPAN標(biāo)簽，而且是最外層的SPAN標(biāo)簽，內(nèi)部的SPAN標(biāo)簽被初始化在它的位置上，以后就不做任何變動(dòng)。每個(gè)元素都可以向上翻，并要翻回來，我們使用的是CSS transforms。