​

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