CSS3实现翻转菜单效果

演示地址

注意:菜单翻转效果在搜狗浏览器上看不出来。推荐用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 = "#" > k </a></li>

 <li><a href = "#" > o </a></li>

 <li><a href = "#" > k </a></li>

 <li><a href = "#" > i </a></li>

 <li><a href = "#" > n </a></li>

 <li><a href = "#" > g </a></li>
 </ul>
</body>
</html>