在javascript中，WebkitTransform 大概相當於 transform 。transform 為標准，WebkitTransform 適用於Webkit浏覽器。js中的WebkitTransform在css對應於-webkit-transform屬性。
在css中transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。
先看一段沒有移動div的代碼：
<style>
#hovertreetf {
border: 1px solid red;
width: 120px;
height: 120px;
}
</style><div id="hovertreetf">這是一個div，沒有移動。何問起</div>
效果：http://hovertree.com/texiao/javascript/3/1.htm
css中transform 屬性可以把div移動。例如：
<style>
#hovertreetf {
border: 1px solid red;
width: 120px;
height: 120px;
transform: translateX(100px);
}
</style><div id="hovertreetf">這是一個div，使用css屬性transform移動。何問起</div>
其中 transform:translateX(100px) 表示id為hovertreetf的div元素水平向右移動100像素。 效果：http://hovertree.com/texiao/javascript/3/2.htm
也可以使用js操作transform屬性使div移動，效果跟上面使用css的一樣。例如：
<style>
#hovertreetf {
border: 1px solid red;
width: 120px;
height: 120px;
}
</style><div id="hovertreetf">這是一個div，使用js操作transform移動。何問起</div>
<script>
document.getElementById("hovertreetf").style.transform = "translateX(100px)";
</script>
效果：http://hovertree.com/texiao/javascript/3/3.htm
上面說到WebkitTransform 大概相當於 transform ，適用於Webkit浏覽器。使用js操作WebkitTransform 也可以使div移動。例如：
<style>
#hovertreetf {
border: 1px solid red;
width: 120px;
height: 120px;
}
</style><div id="hovertreetf">這是一個div，使用js操作WebkitTransform移動。何問起</div>
<script>
document.getElementById("hovertreetf").style.WebkitTransform = "translateX(100px)";
</script>
效果：http://hovertree.com/texiao/javascript/3/4.htm
WebkitTransform在css對應於-webkit-transform屬性，例如：
<style>
#hovertreetf {
border: 1px solid red;
width: 120px;
height: 120px;
-webkit-transform: translateX(100px);
}
</style><div id="hovertreetf">這是一個div，使用css屬性 -webkit-transform 移動。何問起</div>
效果：http://hovertree.com/texiao/javascript/3/5.htm
如果只使用css設置transform，而js沒有設置，那麼js獲取transform屬性值為空，例如：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>關於css設置transform然後用js獲取的代碼_何問起</title>
<meta charset="utf-8" />
<style>
#hovertreetf {border: 1px solid red;width: 120px;height: 120px;transform: translateX(100px);}
#hovertreereusult{border:1px solid green;min-height:40px;margin:5px 0px;}
</style>
</head>
<body>
<div id="hovertreetf">這是一個div，使用css屬性transform移動。js獲取transform值為空。何問起</div>
<div id="hovertreereusult"></div>
<input type="button" value="獲取transform屬性值" id="hovertreeget" />
<script>
document.getElementById("hover"+"treeget").addEventListener("click", function () {
var h_transformValue = document.getElementById("hovertreetf").style.transform;
//如果獲取到的是空字符串，則修改為文字：空
if (h_transformValue == "")
h_transformValue = "空";
document.getElementById("hovertreereusult").innerText = "上面div的transform屬性值為："+h_transformValue;
})
</script>
</body>
</html>
體驗效果：http://hovertree.com/texiao/javascript/3/6.htm
如果先使用js設置了transform的值，則js可以獲取到所設置的值。例如：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>關於js設置transform然後用js獲取的代碼_何問起</title>
<meta charset="utf-8" />
<style>
#hovertreetf {border: 1px solid red;width: 120px;height: 120px;}
#hovertreereusult{border:1px solid green;min-height:40px;margin:5px 0px;}
</style>
</head>
<body>
<div id="hovertreetf">這是一個div，使用js設置transform使它移動。js可獲取所設置的transform值。何問起</div>
<div id="hovertreereusult"></div>
<input type="button" value="獲取transform屬性值" id="hovertreeget" />
<script>
document.getElementById("hovertreetf").style.transform = "translateX(50px)";
document.getElementById("hover"+"treeget").addEventListener("click", function () {
var h_transformValue = document.getElementById("hovertreetf").style.transform;
//如果獲取到的是空字符串，則修改為文字：空
if (h_transformValue == "")
h_transformValue = "空";
document.getElementById("hovertreereusult").innerText = "上面div的transform屬性值為："+h_transformValue;
})
</script>
</body>
</html>
效果體驗：http://hovertree.com/texiao/javascript/3/7.htm