<ul class="all clear">
<li class="box1">
<a href="#">
<span>home</span>
<span>首页</span>
</a>
</li>
<li class="box1">
<a href="#">
<span>answer</span>
<span>问答</span>
</a>
</li>
<li class="box1">
<a href="#">
<span>about</span>
<span>关于我们</span>
</a>
</li>
<li class="box1">
<a href="#">
<span>home</span>
<span>首页</span>
</a>
</li>
</ul>
<style type="text/css">
li{
list-style: none;
}
.clear{
clear: both;
}
.all{ width: 1000px;
height: 130px;
border:1px #CCC solid;
background: #EEE;
margin: 150px auto;
overflow: hidden;
}
.box1{width: 180px;
height: 100px;
float: left;
margin-right: 5px;
margin-top: 15px;
transform-style: preserve-3d;
}
.box1 a,.box1 a span{
display:block;
width: 180px;
height: 100px;
text-align: center;
color: white;
line-height: 100px;
font-size: 20px;
}
.box1 a span{
transition:all 1s;
transform-origin: 10px 1px -10px;
position: absolute;top: 0;right: 0;
}
.box1 a span:first-child{
transform:rotateX(0deg);
background: #01008A;
}
.box1 a span:last-child{
transform:rotateX(-90deg);
background: #008001;
}
.box1 a:hover span:first-child{
transform:rotateY(90deg);
}
.box1 a:hover span:last-child{
transform:rotateY(0deg);
}
</style>