演示地址
注意:菜单翻转效果在搜狗浏览器上看不出来。推荐用FireFox
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > <html xmlns = "http://www.w3.org/1999/xhtml" > <head> <style type = "text/css" > / * < ![CDATA[* / ul .flipboard { margin: 0 ; padding: 0 ; list-style:none; perspective:10000px; } ul .flipboard li { display:inline-block; width :80px; height :80px; margin-right:10px; background :white; font :bold 36px Arial; text-transform:uppercase; text-align: center ; cursor:pointer; } ul .flipboard li a { display:block; width : 100 %; height : 100 %; color :black; text-decoration:none; outline:none; transitional:all 300ms ease-out 0 .1s; } ul .flipboard li a span { box-sizeing:border-box; padding-top:15px; display:block; width : 100 %; height : 100 %; transition:all 300ms ease-out 0 .1s; } ul .flipboard li :hover a { transform:rotate(180deg); background :#cef1ff; border-radius:7px; box_shadow: 0 0 5px #eee inset; } ul .flipboard li :hover a span { transform:rotateY(180deg); } / *]] > * / </style> <title></title> </head> <body> <ul class = "flipboard" > <li><a href = "#" ><span> k </span></a></li> <li><a href = "#" ><span> o </span></a></li> <li><a href = "#" ><span> k </span></a></li> <li><a href = "#" ><span> i </span></a></li> <li><a href = "#" ><span> n </span></a></li> <li><a href = "#" ><span> g </span></a></li> </ul> </body> </html> |