JS中元素動畫效果Transform屬性
元素縮放scale()
1、scale(x,y) 對元素進行縮放。X表示水平方向縮放的倍數 ，Y表示垂直方向的縮放倍數Y是一個可選引數，沒有設定的話，則表示X，Y兩個方向的縮放倍數是一樣的。
2、scaleX(n) 元素只在X軸（水平方向）縮放元素。預設值是1，基點一樣在元素的中心位置。可以通過transform-origin來改變基點。同理，scaleY(n) 元素只在Y軸（垂直方向）縮放元素。
如下例：
<html>
<head>
<style type="text/css">
.test{
width:200px;
height:50px;
background-color:gray;
color:white;
text-align:center;
cursor:pointer;
display:table-cell;
vertical-align:middle;
}
</style>
<script type="text/javascript">
function scale1(){
document.getElementById("test").style.WebkitTransform="scale(1.1,1)";
document.getElementById("test").style.WebkitTransform="translate(120px)";
document.getElementById("test").style.WebkitTransform="skew(20deg)";
document.getElementById("test").style.WebkitTransform="rotate(370deg)";
}
function scale2(){
document.getElementById("test").style.WebkitTransform="scale(1)";
}
</script>
</head>
<body>
<div style="margin:0 0 0 100px;">
<div class="test" id="test" onMouseOver="scale1()" onMouseOut="scale2()">
這是一個縮放效果測試！
</div>
<div>
</body>
</html>
元素移動translate(120px),用法同上；
元素傾斜skew(10deg),deg代表"度"，用法同上；
元素旋轉rotate(10deg),用法同上,按順時針旋轉，沒有X、Y軸；