CSS 3新特性学习----2D转换

来源：互联网发布：mac 创建.gitignore 编辑：程序博客网时间：2024/05/01 12:26

CSS 3能够对元素进行移动，缩放，转动拉长或者拉伸，通过这些手段我们就可以实现2D转换的效果。

IE 10,FireFox以及Opera支持transform属性，Chrome和Safari需要加上前缀-webkit-,IE 9则有些特别，需要加上前缀-ms-。

<style>   .out {        width:200px;height:200px;        border:1px solid red;   }   .inner {        width:200px;height:200px;        border:1px solid blue;/*平移效果transform:translate(10px,10px);                -webkit-transform:translate(10px,10px);                -ms-transform:translate(10px,10px);

               *//*缩放效果transform:scale(0.5,0.5);  指定参照点进行缩放,也可以用百分比或者关键字来指定缩放参考点-webkit-transform-origin:0 0;-webkit-transform:scale(0.5,0.5);        *//*-webkit-transform-origin:0 0;角度-webkit-transform:rotate(10deg);弧度-webkit-transform:rotate(0.1rad);        *//*斜切-webkit-transform:skew(10deg,10deg);        -webkit-transform:skewX(10deg);*/   }</style><div class="out">   <div class="inner">   </div></div>

下面是一个实现一个区块进行2D转换的例子:

<!doctype><html lang="zh-hans"><head>     <meta charset="utf-8">    <style>       .d1 {           width:200px;height:200px;border:1px solid red;        }    </style></head><body>      <div class="d1"></div>      <script>          window.onload = function(){     var div = document.getElementsByTagName("div")[0]; var angle = 0; setInterval(function(){     angle++; makeDivRevolve(div,{transform:"rotate("+angle+"deg)","transform-origin":"50% 50%"}); },60);  };  function makeDivRevolve(docElement,attrObject){     for(var attr in attrObject){      var newAttr = attr;   if(newAttr.indexOf("-")>0){   var num=newAttr.indexOf("-");   newAttr=newAttr.replace(newAttr.substr(num,2),newAttr.substr(num+1,1).toUpperCase());   }   docElement.style[newAttr]=attrObject[attr];               newAttr=newAttr.replace(newAttr.charAt(0),newAttr.charAt(0).toUpperCase());                   docElement.style["webkit"+newAttr]=attrObject[attr];               docElement.style["moz"+newAttr]=attrObject[attr];               docElement.style["o"+newAttr]=attrObject[attr];               docElement.style["ms"+newAttr]=attrObject[attr]; }  }      </script></body></html>

0 0