css3的transform2D用法

来源：互联网发布：java 用户登录次数编辑：程序博客网时间：2024/06/05 19:52

今天稍微有点空余时间，看了一下css3中transform2D的用法，还挺简单实用。

1.基本的用法

transform: translate(20px, 20px);

transform: rotate(30deg);transform-origin:0 0;

transform: rotate(30deg);transform-origin:100% 100%;默认情况下是50% 50%。

transform: scale(4,2);

通过 skew(30deg,20deg)方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：

2.难点：matrix矩阵

首先需要先回忆一下矩阵论里面矩阵相乘的知识，其次了解一下投影矩阵的概念。

上面的公式计算后：ax+cy+e为变换后的水平坐标，bx+dy+f表示变换后的垂直位置。

相信如果对矩阵论还有印象，应该会记得二维矩阵[1 0 0 1]实际上就是一个单位矩阵，任何二维矩阵乘以它就等于矩阵本身。了解了这个知识点，下面我们研究一下这个矩阵。

(1)translate

所以，如果有这么个矩阵，transform: matrix(1, 0, 0, 1, 10, 10); /* a=1, b=0, c=0, d=1, e=30, f=30 */
那么，变换后的x坐标就是ax+cy+e = 1*0+0*0+10 =10, y坐标就是bx+dy+f = 0*0+1*0+10 =10. 于是，中心点坐标从(0, 0)变成了→(10, 10)。相当于div往右下方同时偏移了10像素！

实际上transform: matrix(1, 0, 0, 1, 10, 10);就等同于transform: translate(10px, 10px);

(2)缩放(scale)

上面的偏移是matrix效果中最简单，最容易理解的。下面，为了进一步加深对matrix的理解，会简单讲下matrix矩阵与缩放，旋转以及拉伸效果。

再回忆一下矩阵论，有没有想起来有个特殊的矩阵叫斜对角矩阵[m,0,0,m].

于是带到上面的公式里面，x’ = ax+cy+e = m*x+0*y+0 = m*x;y’ = bx+dy+f = 0*x+m*y+0 = m*y;

很明显matrix(mx, 0, 0, my, 0, 0)，相当于scale(mx, my);

(3)旋转(rotate)

方法以及参数使用如下（假设角度为θ）：matrix(cosθ,sinθ,-sinθ,cosθ,0,0)结合矩阵公式，就有：

x’ = x*cosθ-y*sinθ+0 = x*cosθ-y*sinθ

y’ = x*sinθ+y*cosθ+0 = x*sinθ+y*cosθ

所以matrix(cosθ,sinθ,-sinθ,cosθ,0,0)相当于rotate(θdeg)，这边还是rotate(θdeg)比较简单。
(4)拉伸(skew)

拉伸也用到了三角函数，不过是tanθ，而且，其只和b, c两个参数相关：matrix(1,tan(θy),tan(θx),1,0,0)

套用矩阵公式计算结果为：

x’ = x+y*tan(θx)+0 = x+y*tan(θx)

y’ = x*tan(θy)+y+0 = x*tan(θy)+y

对应于skew(θx + “deg”，θy+ “deg”)这种写法。其中，θx表示x轴倾斜的角度，θy表示y轴，两者并无关联。

所以，利用matrix我们就可以实现自己想要的transform效果。

下面贴点代码

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>transform2D</title>    <style type = "text/css">    div {        width: 120px;        height: 120px;        background-color: #229988;        word-wrap: break-word;    }    .my-translate {        transition: transform 2s;        transform: translate(20px, 20px);        -ms-transform: translate(20px, 20px);       /* IE 9 */        -webkit-transform: translate(20px, 20px);   /* Safari and Chrome */        -o-transform: translate(20px, 20px);        /* Opera */        -moz-transform: translate(20px, 20px);      /* Firefox */    }    .my-rotate1 {        transition: transform 2s;        margin-top: 20px;        transform: rotate(30deg);        -ms-transform: rotate(30deg);       /* IE 9 */        -webkit-transform: rotate(30deg);   /* Safari and Chrome */        -o-transform: rotate(30deg);        /* Opera */        -moz-transform: rotate(30deg);      /* Firefox */        transform-origin:0 0;    }    .my-rotate2 {        transition: transform 2s;        margin-top: 20px;        transform: rotate(30deg);        -ms-transform: rotate(30deg);       /* IE 9 */        -webkit-transform: rotate(30deg);   /* Safari and Chrome */        -o-transform: rotate(30deg);        /* Opera */        -moz-transform: rotate(30deg);      /* Firefox */        transform-origin:100% 100%;    }    .scale {        transition: transform 2s;        transform: scale(2,0.5);        -ms-transform: scale(2,0.5);    /* IE 9 */        -webkit-transform: scale(2,0.5);    /* Safari 和 Chrome */        -o-transform: scale(2,0.5); /* Opera */        -moz-transform: scale(2,0.5);   /* Firefox */        }    .skew {        transition: transform 2s;        transform: skew(30deg,20deg);        -ms-transform: skew(30deg,20deg);   /* IE 9 */        -webkit-transform: skew(30deg,20deg);   /* Safari and Chrome */        -o-transform: skew(30deg,20deg);    /* Opera */        -moz-transform: skew(30deg,20deg);  /* Firefox */    }       </style></head><body>    <h1>transform2D</h1>    <h2>1.基本的用法</h2>    <div id = "mydiv1"> translate()最初的div</div>    <button id="translate">translate(20px,20px)</button>    <div id = "mydiv2"> rotate(30deg),旋转点为0,0</div>    <button id="rotate1">rotate(30deg)</button>    <div id = "mydiv3"> rotate(30deg),旋转点为100%,100%</div>    <button id="rotate2">rotate(30deg)</button>    <div id = "mydiv4"> transform: scale(4,2);</div>    <button id="scale">scale(4,2);</button>    <div id = "mydiv5"> transform: skew(30deg,20deg);</div>    <button id="skew">skew(30deg,20deg)</button>    <script>        function animate(btnName, divName,animateName){            var btn = document.getElementById(btnName);            var div = document.getElementById(divName);                btn.addEventListener("click", function(event){                    div.className = animateName;                event.stopPropagation();            },false);        }        animate("translate", "mydiv1", "my-translate");        animate("rotate1", "mydiv2", "my-rotate1");        animate("rotate2", "mydiv3", "my-rotate2");        animate("scale", "mydiv4", "scale");        animate("skew", "mydiv5", "skew");    </script></body></html>

0 0