css3导航鼠标经过移动、缩放、转动、拉长、拉伸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3动画的属性主要分为三类：transform、transition以及animation。</title>
<style type="text/css">
*{margin:0; padding:0;}
.nav{ width: 200px; font-family: 'Microsoft Yahei'; margin: 50px auto;
/*设置3D*/
transform-style: preserve-3d;
/*为元素设置三维透视距离*/
perspective:400px;
}
.nav li{ height: 30px; line-height: 30px; margin:1px;text-align: center; list-style: none; overflow: hidden; background: #F89928;}
.nav li a{ display: block; color: #fff; font-size: 16px; text-decoration: none }
.nav li:hover{
/*移动、缩放、转动、拉长、拉伸*/
/*这个元素沿着Z轴移动30px，沿着X/Y轴放大1.1倍；*/
transform: translateZ(30px) scale(1.1);
}
</style>
</head>
<body>
<nav class="nav">
<ul>
<li><a href="#">html5</a></li>
<li><a href="#">css3</a></li>
<li><a href="#">jquery</a></li>
<li><a href="#">javascript</a></li>
</ul>
</nav>
</body>
</html>
如图所示：
