<!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>
时间： 2024-10-07 19:20:25