<!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>
如圖所示：
