CSS3神奇的matrix

2017-03-01 本文已影响1180人 ferrint

关键词：matrix

css最为人称道的优点之一就是增加了transform功能，用它来配黑transition可是不用js就能够实现优美的动画效果，css3提供了四种变换方法位移，缩放，旋转，斜切
简单演示下效果：
* <div class="box"></div>

       /* CSS代码 */  

        .box{
            width: 100px;
            height: 100px;
            box-sizing: content-box;
            background-color: #eee;
            border:1px solid #ccc;
            transition: 1s;
        }
        .box:hover{
            
             transform: skew(35deg);    /* 斜切 */  
             transform:scale(1, 0.5);   /* 缩放 */
             transform:rotate(45deg);   /* 旋转 */
             transform:translate(10px, 20px);  /* 位移 */

        }

那这些方法是怎么实现的呢,其实都是通过矩阵的方式做出来的，

matrix功能实现

一提到矩阵是不是联想到线性代数啦，突然间好方( ⊙ o ⊙ )啊！
其实并不难，用到的都是简单的矩阵
旋转、压缩、斜切等，本质上都是应用的matrix()方法实现的（修改matrix()方法固定几个值），只是类似于transform:rotate这种表现形式，我们更容易理解，记忆与上手。

写法是这样的
* transform: matrix(a,b,c,d,e,f);

六个参数对应的矩阵：

矩阵

其变化的方法：

变换公式

什么意思呢?

ax+cy+e表示变换后的水平坐标，

bx+dy+f 表示变换后的垂直位置。

位移（displace）
* transform: matrix(1, 0, 0, 1, 100, 100); /* a=1, b=0, c=0, d=1, e=100, f=100 */

变换后：

x坐标 : ax+cy+e = 10+00+30 =30,

y坐标 : bx+dy+f = 00+10+30 =30.

缩放(scale)
* transform: matrix(3, 0, 0, 0.5, 0, 0);

其实就是这样一个公式

*比例是 s，则有matrix(s, 0, 0, s, 0, 0);第一个s代表x轴，第二个s代表y轴。

x' = ax+cy+e = sx+0y+0 = s*x;

y' = bx+dy+f = 0x+sy+0 = s*y;

旋转(rotate)

* transform: matrix(0.866025,0.500000,-0.500000,0.866025,0,0);  // 旋转30度

matrix(cosθ,sinθ,-sinθ,cosθ,0,0)

x' = xcosθ-ysinθ+0 = xcosθ-ysinθ

y' = xsinθ+ycosθ+0 = xsinθ+ycosθ

拉伸(skew)

* transform: matrix(1,0,0.75,1,0,0);

matrix(1,tan(θy),tan(θx),1,0,0)

x' = x+ytan(θx)+0 = x+ytan(θx)

y' = xtan(θy)+y+0 = xtan(θy)+y

我在github上上传了几个小demo，可以对matrix矩阵进行转换:

[旋转变换][]
[旋转变换]:http://htmlpreview.github.io/?https://github.com/ferrinte/matrix/blob/master/matrix%E8%BD%AC%E6%8D%A2%E5%99%A8/%E6%97%8B%E8%BD%AC.html
[斜切变换][]
[斜切变换]:http://htmlpreview.github.io/?https://github.com/ferrinte/matrix/blob/master/matrix%E8%BD%AC%E6%8D%A2%E5%99%A8/%E6%96%9C%E5%88%87.html
[缩放变换][]
[缩放变换]:http://htmlpreview.github.io/?https://github.com/ferrinte/matrix/blob/master/matrix%E8%BD%AC%E6%8D%A2%E5%99%A8/%E7%BC%A9%E6%94%BE.html

利用matrix矩阵，可以实现IE下的兼容，而且还可以做出很多特别炫的效果，大家多多尝试，共勉！！

CSS3神奇的matrix

猜你喜欢

热点阅读