css3 动画导航 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        height: 50px;
    }
    ul li{
        width: 100px;
        display: inline-block;
        padding: 20px;
        background: #ccc;
        position: relative;
        -webkit-transform-style: preserve-3d;
        transition: 2s;
    }
    ul li:hover{
        transform: rotateX(180deg);
    }
    ul li span{
        width: 100%;
        position: absolute;
        left:0px;
        top: 0px;
        -webkit-backface-visibility: hidden;
    }
    .back{
    transform:rotateX(180deg);
    }

    </style>
    
    
    
</head>
<body>
    <ul>
        <li><span>nav-1</span><span class="back">11</span></li>
        <li><span>nav-2</span><span class="back">22</span></li>
        <li><span>nav-3</span><span class="back">33</span></li>
        <li><span>nav-4</span><span class="back">44</span></li>
        <li><span>nav-5</span><span class="back">55</span></li>
    </ul>    
</body>
</html>

 

posted @ 2017-06-05 19:03  Jinsuo  阅读(142)  评论(0)  编辑  收藏  举报