在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设置transfor<mark style="color:transparent">来源gaodaimacom搞#代%码网</mark>m然后用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>
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：CSS3和javascript中的transform
转载请注明原文链接：CSS3和javascript中的transform
