你的位置:首页 > Java教程

[Java教程]CSS3和javascript中的transform


在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

更多网页特效:http://www.cnblogs.com/jihua/p/webfront.html