css3 变形

CSS3从IE滤镜偷窍过来的创意，但易用性明显提高了许多。利用这个，我们可以对某个元素进行旋传，缩放，倾斜与位移，并且区分元素类型，无论对块状元素还是内联元素都有效。

rotate(旋转)

rotate(angle)
rotate3d(x ,y ,z ,angle)
rotateX(angle) 单独设定 rX 轴的角度。
rotateY(angle) 单独设定 rY 轴的角度。
rotateZ(angle) 单独设定 rZ 轴的角度。

其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：transform:rotate(30deg):

IE下可以使用BasicImage滤镜，但其rotate参数有个天然的缺陷只能取四个值

0 不旋转
1 顺时钟旋转90度
2 顺时钟旋转180度
3 顺时钟旋转270度

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>dom Framework by 司徒正美</title> <style> .box{ width:200px; height: 200px; background: red; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); -ms-filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2); } </style> </head> <body> <h3>CSS3 transfrom rorate旋转 by 司徒正美</h3> <div class="box"> 测试 </div> </body> </html>

这时我们就要动用万能的矩阵滤镜了DXImageTransform.Microsoft.Matrix。

//在IE旋转任意角度 by 司徒正美
      function rorateIt(node,deg){
        //取得末变形前矩形的中点
        var rect = node.getBoundingClientRect(),
        cx1 = (rect.right  - rect.left) / 2, // center x
        cy1 = (rect.bottom - rect.top)  / 2, // center y
        deg2rad =  Math.PI / 180,//角度转弧度
        rad = deg * deg2rad ,
        cos = Math.cos(rad),
        sin = Math.sin(rad);
        var ident  = "DXImageTransform.Microsoft.Matrix";
        node.style.filter = "progid:"+ident +"(M11='1.0',sizingmethod='auto expand')";
        //http://www.satzansatz.de/cssd/onhavinglayout.html
        if(!node.currentStyle.hasLayout){//在IE7中，如果没有获得hasLayout，滤镜会失效
          node.style.writingMode  = "tb-rl";
        }   
        var filter = node.filters.item(ident);
        //  +-------+-------+
        //  |  M11  |  M12  |
        //  +-------+-------+
        //  |  M21  |  M22  |
        //  +-------+-------+
        filter.M11 = cos;          
        filter.M12 = -sin;         
        filter.M21 = sin;           
        filter.M22 = cos;          
        //取得当前中心
        rect = node.getBoundingClientRect();
        var cx = (rect.right  - rect.left) / 2;
        var cy = (rect.bottom - rect.top)  / 2;
        //调整此元素的坐标系，实现CSS3 transform-origin的功能
        node.style.marginLeft = cx1 - cx + "px";
        node.style.marginTop  = cy1 - cy + "px";
   
      }

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>dom Framework by 司徒正美</title>
    <script>
      function rorateIt(node,deg){
        //取得末变形前矩形的中点
        var rect = node.getBoundingClientRect(),
        cx1 = (rect.right  - rect.left) / 2, // center x
        cy1 = (rect.bottom - rect.top)  / 2, // center y
        deg2rad =  Math.PI / 180,//角度转弧度
        rad = deg * deg2rad ,
        cos = Math.cos(rad),
        sin = Math.sin(rad);
        var ident  = "DXImageTransform.Microsoft.Matrix";
        node.style.filter = "progid:"+ident +"(M11='1.0',sizingmethod='auto expand')";
        //http://www.satzansatz.de/cssd/onhavinglayout.html
        if(!node.currentStyle.hasLayout){//在IE7中，如果没有获得hasLayout，滤镜会失效
          node.style.writingMode  = "tb-rl";
        }   
        var filter = node.filters.item(ident);
        //  +-------+-------+
        //  |  M11  |  M12  |
        //  +-------+-------+
        //  |  M21  |  M22  |
        //  +-------+-------+
        filter.M11 = cos;          
        filter.M12 = -sin;         
        filter.M21 = sin;           
        filter.M22 = cos;          
        //取得当前中心
        rect = node.getBoundingClientRect();
        var cx = (rect.right  - rect.left) / 2;
        var cy = (rect.bottom - rect.top)  / 2;
        //调整此元素的坐标系，实现CSS3 transform-origin的功能
        node.style.marginLeft = cx1 - cx + "px";
        node.style.marginTop  = cy1 - cy + "px";
   
      }
    </script>
    <style>
      .box{
        width:200px;
        height: 200px;
        background: red;

-webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
      }
    </style>
  </head>
  <body>
    <h3>CSS3 transfrom rorate旋转 v2 by 司徒正美</h3>
    <div class="box" onclick="rorateIt(this,45);rorateIt=function(){}">
      IE中请点一下
    </div>
  </body>
</html>

scale(缩放)

scale(x,y) 设定 X 轴与 Y 轴的缩放量。
scale3d(z) 设定 X 轴、Y 轴与 Z 轴的缩放量。
scaleX(x) 单独设定 X 轴的缩放量。
scaleY(y) 单独设定 Y 轴的缩放量。
scaleZ(z) 单独设定 Z 轴的缩放量。

在IE下，我们可以使用zoom对元素按比例缩放，如果是图片我们还可以使用DXImageTransform.Microsoft.AlphaImageLoader

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>dom Framework by 司徒正美</title>
    <script>
      function scaleIt(node,scaleX,scaleY){
        //取得末变形前矩形的中点
        var rect = node.getBoundingClientRect(),
        cx1 = (rect.right  - rect.left) / 2, // center x
        cy1 = (rect.bottom - rect.top)  / 2, // center y
        deg2rad =  Math.PI / 180,//角度转弧度
        deg = 0,scaleX = scaleX || 1,scaleY = scaleY || 1,
        rad = deg * deg2rad ,
        cos = Math.cos(rad),
        sin = Math.sin(rad);
        var ident  = "DXImageTransform.Microsoft.Matrix";
        node.style.filter = "progid:"+ident +"(M11='1.0',sizingmethod='auto expand')";
        //http://www.satzansatz.de/cssd/onhavinglayout.html
        if(!node.currentStyle.hasLayout){//在IE7中，如果没有获得hasLayout，滤镜会失效
          node.style.writingMode  = "tb-rl";
        }   
        var filter = node.filters.item(ident);
        //  +-------+-------+
        //  |  M11  |  M12  |
        //  +-------+-------+
        //  |  M21  |  M22  |
        //  +-------+-------+
        filter.M11 = cos * scaleX;          
        filter.M12 = -sin * scaleY;         
        filter.M21 = sin * scaleX;           
        filter.M22 = cos * scaleY;          
        //取得当前中心
        rect = node.getBoundingClientRect();
        var cx = (rect.right  - rect.left) / 2;
        var cy = (rect.bottom - rect.top)  / 2;
        //调整此元素的坐标系，实现CSS3 transform-origin的功能
        //  node.style.marginLeft = cx1 - cx + "px";
        //  node.style.marginTop  = cy1 - cy + "px";
   
      }
      window.onload = function(){
        if(window.VBArray){
          var dom = function(id){
            return document.getElementById(id)
          }
          scaleIt(dom("box1"),2,2)
          scaleIt(dom("box2"),2,1)
          scaleIt(dom("box3"),-2,1)
        }
      }
    </script>
    <style>
      .box{
        width:40px;
        height: 40px;
        background: red;
        border: 1px solid green;
        margin: 40px;
      }

#box1{
        /* box1元素的宽和高都会被放大双倍 */
        -webkit-transform: scale(2);
        -moz-transform: scale(2);
      }

#box2 {
        /* box2元素的宽会是双倍，而高度保持不变 */ 
        -webkit-transform: scale(2, 1); 
        -moz-transform: scale(2, 1);
      }
      #box3 {
        /* box3的宽度将是双倍，并且水平翻转，但是高度保持不变 */ 
        -webkit-transform: scale(-2, 1); 
        -moz-transform: scale(-2, 1); 
      }
    </style>
  </head>
  <body>
    <h3>CSS3 transfrom rorate缩放 by 司徒正美</h3>
    <div class="box" id="box1" >
      box1
    </div>
    <div class="box" id="box2" >
      box1
    </div>
    <div class="box" id="box3" >
      box1
    </div>

</body>
</html>

translate(位移)

translate(x,y) 设定 X 轴与 Y 轴的偏移量。
translate3d(x,y,z) 设定 X 轴、Y 轴与 Z 轴的偏移量。
translateX(x) 单独设定 X 轴的偏移量。
translateY(y) 单独设定 Y 轴的偏移量。
translateZ(z) 单独设定 Z 轴的偏移量。

这相当CSS2.1时原有的相对定位。

参考

http://blog.hinablue.me/entry/CSS3-note-css3-transform-matrix-note
http://blog.beyes.tw/500
http://jquery.org.cn/css/css3preview/Transform.html
http://www.useragentman.com/IETransformsTranslator/
https://github.com/heygrady/transform

posted on 2012-01-21 12:54 司徒正美阅读(4351) 评论(2) 编辑收藏举报

刷新页面返回顶部

Ruby's Louvre

导航

公告

css3 变形

rotate(旋转)

scale(缩放)

translate(位移)