在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>
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像素。
也可以使用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>
上面说到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>
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>
如果只使用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>