css实现翻转导航栏的效果

效果图如下

html代码如下

<nav>
        <ul>
            <li>
                <div>
                    <span class="no1">爱情电影</span>
                    <span class="no2">爱情电影</span>
                </div>
            </li>
            <li>
                <div>
                    <span class="no1">动作电影</span>
                    <span class="no2">动作电影</span>
                </div>
            </li>
            <li>
                <div>
                    <span class="no1">科幻电影</span>
                    <span class="no2">科幻电影</span>
                </div>
            </li>
            <li>
                <div>
                    <span class="no1">武侠电影</span>
                    <span class="no2">武侠电影</span>
                </div>
            </li>
            <li>
                <div>
                    <span class="no1">喜剧电影</span>
                    <span class="no2">喜剧电影</span>
                </div>
            </li>
            <li>
                <div>
                    <span class="no1">奇幻电影</span>
                    <span class="no2">奇幻电影</span>
                </div>
            </li>
            <li>
                <div>
                    <span class="no1">恐怖电影</span>
                    <span class="no2">恐怖电影</span>
                </div>
            </li>
            <li>
                <div>
                    <span class="no1">悬疑电影</span>
                    <span class="no2">悬疑电影</span>
                </div>
            </li>
        </ul>
        </nav>

css代码如下

*{
margin: 0;
padding: 0;
}
nav{
width: 960px;
height: 40px;
background-color: aqua;
margin: 100px auto;
}
nav ul{
list-style: none;
}
nav ul li{
float: left;
width: 120px;
height: 40px;
}
nav ul li div{
width: 120px;
height: 40px;
position: relative;
-webkit-perspective: 6000px;
transition:all 0.4s ease 0s;
-webkit-transform-style:preserve-3d;
}
nav ul li:hover>div{
-webkit-transform: rotateX(-90deg);
}
nav ul li span{
position: absolute;
top: 0;
left: 0;
width: 120px;
height: 40px;
text-align: center;
line-height: 40px;
}
nav ul li span.no1{
background-color: aquamarine;
-webkit-transform: translateZ(20px);
}
nav ul li span.no2{
background-color:gold;
-webkit-transform: rotateX(90deg) translateZ(20px);
}​​​​​​​