CSS3实现翻转菜单效果

　2013-08-04 15:02:04　来源：WEB开发网　　　

核心提示：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="h

<!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>