效果图如下
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:100pxauto;
}
navul{
list-style:none;
}
navulli{
float:left;
width:120px;
height:40px;
}
navullidiv{
width:120px;
height:40px;
position:relative;
-webkit-perspective:6000px;
transition:all0.4sease0s;
-webkit-transform-style:preserve-3d;
}
navulli:hover>div{
-webkit-transform:rotateX(-90deg);
}
navullispan{
position:absolute;
top:0;
left:0;
width:120px;
height:40px;
text-align:center;
line-height:40px;
}
navullispan.no1{
background-color:aquamarine;
-webkit-transform:translateZ(20px);
}
navullispan.no2{
background-color:gold;
-webkit-transform:rotateX(90deg)translateZ(20px);
}
