奔跑吧，小肥羊！

3D文字菜单变换 

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>20160122</title>

    <style>
.nav{
    margin: 0;
    padding: 50px;

}
.nav li{
    float: left;
    list-style: none;
    padding: 0 15px;
    -webkit-perspective:100px;
}
.nav a{
    float: left;
    position: relative;
    font:14px/20px "宋体";
    text-decoration: none;

    -webkit-transform-style:preserve-3d;
    transition:.5s;
    -webkit-transform-origin:center center -10px;            
}
.nav span{
    float: left;
    width: 60px;
    text-align: center;
    -webkit-backface-visibility:hidden;
}
.nav span:nth-of-type(2){
    position: absolute;
    left:0;
    top:-20px;

    -webkit-transform-origin:bottom;
    -webkit-transform:rotateX(90deg);
}
.nav a:hover{
    -webkit-transform:rotateX(-90deg);
}


    </style>
  </head>

  <body>
<ul class="nav">
    <li>
        <a href="#">
            <span>选项一</span>
            <span>选项1</span>    
        </a>
    </li>
    <li>
        <a href="#">
            <span>选项二</span>
            <span>选项2</span>    
        </a>
    </li>
    <li>
        <a href="#">
            <span>选项三</span>
            <span>选项3</span>    
        </a>
    </li>
</ul>


    <script type="text/javascript">

    </script>
  </body>
</html>

 

posted @ 2016-01-25 14:53  xiayedexin  阅读(155)  评论(0)    收藏  举报