Matrix 矩阵 那么什么是矩阵呢？

矩阵可以理解为方阵，只不过 平时方阵里面站着人 矩阵中是数值：

CSS3中的矩阵：

css3中的矩阵指的是一个方法，书写为matrix() 和 matrix3d(),前者是元素2D平面的移动变换(transfrom)，而后者是3D变换。2D变换矩阵3*3，如上图的示意图：3D变换则是4*4的矩阵。

可能有些难以理解 我们可以先看看其他东西 层层渐近-transform属性

.trans_skew { transform: skew(35deg); }

.trans_scale { transform:scale(1, 0.5); }

.trans_rotate { transform:rotate(45deg); }

.trans_translate { transform:translate(10px, 20px); }

扭曲（skew）缩放(scale) 旋转(rotate) 以及位移(translate)

那你有没有想过 为什么transform：rotate(45deg); 会让元素旋转45度 其后面作用的机理是什么呢。

下面这张图可以解释上面的疑问：

可以看到无论是旋转还是拉伸 本质上应用的都是matrix()方法实现的(修改matrix()方法固定的几个值)，只是类似于transform:rotate这种表现形式 我们更容易理解 记忆 与 上手。

换句话说理解transform中的matrix()矩阵方法有利于透彻理解CSS3中的transform属性。

矩阵应用场景和transform的坐标系统

实际上 在CSS3以及HTML5的世界里 矩阵matrix用的还是十分广泛的。 如 SVG和canvas

用过transform旋转的人可能发现了 其默认是绕着中心点旋转的，而这个中心点就是transform-origin属性对应的点。也就是矩阵计算的一个重要的依据点。

当我们通过transform-origin属性进行设置的时候，矩阵相关的计算也就随着而改变，反映到实际图像效果上就是 旋转拉伸的中心点变了！

举例来说：如果我们设置了元素的基点在左下角时：

-webkit-transform-origin: bottom left;

坐标中心就是左下角位置  于是动画(比如图片收缩)就是基于图片的左下角这一点了：

<head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .anim_image {

                -webkit-transition: all 1s ease-in-out;

                -moz-transition: all 1s ease-in-out;

                transition: all 1s ease-in-out;

                cursor: pointer;

            }

            .anim_image_top {

                position: absolute;

                -webkit-transform: scale(0,0);

                opacity: 0;

            }

            .anim_box:hover .anim_image_top  {

                opacity: 1;

                -webkit-transform: scale(1,1);

                -webkit-transform-origin:top right;

            }

            .anim_box:hover .anim_image_bottom {

                    -webkit-transform: scale(0, 0);

                    -webkit-transform-origin: bottom left;

            }

        </style>

    </head>

    <body>

        <div id="testBox" class="demo anim_box">

            <img class="anim_image anim_image_top" src="../img/top.png" />

                <img class="anim_image anim_image_bottom" src="../img/bottom.png" />

        </div>

    </body>

</html>

可以运行一下 看看效果 分别是基于右上角 和 左上角的缩放。

可以在举个例子

transform-origin: 50px 70px;

中心点的位置移到了距离左侧50像素 顶部70像素的地方 而此时的(30,30)坐标则移到了图中白点的位置：

现在是不是很好理解了呢。

下面我们就跟着大神的脚步 来理解一下 2D matrix (哈哈 我也是看着大神的博客抄的。后面会贴出出处)

CSS3中 transform的matrix()方法 写法如下：

transform:matrix(a,b,c,d,e,f);

参数很复杂 达到了六个

实际上这六个参数对应的矩阵就是：

注意书写的方向是竖着的。

上面提过，矩阵可以想象成古代的士兵方阵，要让其发生变化，只有与另外一个士兵阵火拼就可以了，即使这是个小阵。

反应到这里 就是如下的转换公式

其中 x,y表示转换元素的所有坐标了 那后面的ax＋cy＋e是怎么来的呢？

很简单 3*3矩阵每一行的第一个值与后面1*3的第一个值相乘

那ax+cy+e的意义是什么？

记住了，ax+cy+e为变换后的水平坐标，bx+dy+f表示变换后的垂直位置。

下面看一个例子：

transform: matrix(1, 0, 0, 1, 30, 30); /* a=1, b=0, c=0, d=1, e=30, f=30 */

现在 我们根据这个矩阵偏移元素的中心点，假设是(0,0)，即x=0 y = 0

于是，变换后的x坐标就是ax+cy+e = 1*0+0*0+30 =30, y坐标就是bx+dy+f = 0*0+1*0+30 =30.

于是，中心点坐标从(0, 0)变成了→(30, 30)。对照上面有个(30, 30)的白点图，好好想象下，原来(0,0)的位置，移到了白点的(30, 30)处，怎么样，是不是往右下方同时偏移了30像素哈！！

实际上transform: matrix(1, 0, 0, 1, 30, 30);就等同于transform: translate(30px, 30px);. 注意：translate, rotate等方法都是需要单位的，而matrix方法e, f参数的单位可以省略。

所以说 可以看出来 只要是中心点没有改变还是原来的(0,0) 那么matrix表现偏移就是

transform: matrix(与我无关, 哪位, 怎么不去高考, 打麻将去吧, 水平偏移距离, 垂直偏移距离);

你只要关心后面两个参数就可以了，至于前面4个参数，是牛是马，是男是女都没有关系的。

transform matrix矩阵与缩放，旋转以及拉伸

偏移是matrix效果中最简单，最容易理解的，因此，上面很详尽地对此进行展开说明。下面，为了进一步加深对matrix的理解，会简单讲下matrix矩阵与缩放，旋转以及拉伸效果。

缩放(scale)
上面的偏移只要关心最后两个参数，这个缩放也是只要关心两个参数。哪两个呢？

如果你足够明察秋毫，应该已经知道了，因为上面多次出现的：

transform: matrix(1, 0, 0, 1, 30, 30);

已经出卖了。

发现没，matrix(1, 0, 0, 1, 30, 30);的元素比例与原来一样，1:1, 而这几个参数中，有两个1, 啊哈哈！没错，这两个1就是缩放相关的参数。

其中，第一个缩放x轴，第二个缩放y轴。

用公式就很明白了，假设比例是s，则有matrix(s, 0, 0, s, 0, 0);，于是，套用公式，就有：
x' = ax+cy+e = s*x+0*y+0 = s*x;
y' = bx+dy+f = 0*x+s*y+0 = s*y;

也就是matrix(sx, 0, 0, sy, 0, 0);，等同于scale(sx, sy);

旋转(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θ

哎呀呀，四个参数，我记不住啊！莫慌，我们可以这样子记忆：
CS-SC：初三-上床，对称结构，这下忘不了了吧~~

不过，说句老实话，就旋转而言，rotate(θdeg)这种书写形式要比matrix简单多了，首先记忆简单，其次，无需计算。例如，旋转30°，前者直接：

transform:rotate(30deg);

而使用matrix表示则还要计算cos, sin值：

transform: matrix(0.866025,0.500000,-0.500000,0.866025,0,0);

拉伸(skew)
拉伸也用到了三角函数，不过是tanθ，而且，其至于b, c两个参数相关，书写如下（注意y轴倾斜角度在前）：

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轴，两者并无关联。

大神的博客在此 有兴趣的可以移步到此：http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-矩阵/

HTML 学习笔记 CSS3 (2D Matrix)的更多相关文章

  1. HTML 学习笔记 CSS3 (2D转换)

    2.scaleX(<number>) : 使用 [sx,1] 缩放矢量执行缩放操作,sx为所需参数.scaleX表示元素只在X轴(水平方向)缩放元素,他的默认值是(1,1),其基点一样是在 ...

  2. A.Kaw矩阵代数初步学习笔记 4. Unary Matrix Operations

    “矩阵代数初步”(Introduction to MATRIX ALGEBRA)课程由Prof. A.K.Kaw(University of South Florida)设计并讲授. PDF格式学习笔 ...

  3. A.Kaw矩阵代数初步学习笔记 3. Binary Matrix Operations

    “矩阵代数初步”(Introduction to MATRIX ALGEBRA)课程由Prof. A.K.Kaw(University of South Florida)设计并讲授. PDF格式学习笔 ...

  4. css3学习笔记之2D转换

    translate() 方法 translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ...

  5. HTML 学习笔记 CSS3(Animation)

    CSS3动画: 通过CSS3 我们能够创建动画 这可以在许多网页中取代动画图片 Flash动画 以及JavaScript. CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 ...

  6. HTML 学习笔记 CSS3(过度 transition)

    通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果.请把鼠标移动到下面的元素上: 先看一下这个代码 实现旋转放大的效 ...

  7. ArcGIS API for JavaScript 4.2学习笔记[10] 2D添加指北针widget、视图保存、视图padding（第二章完结）

    这几个例子是第二章除了入门之外比较简单的几个,就做个合集,把最核心的代码(第二参数)和 引用放上来即可,不作多解释. 2D地图添加指北针widget 2D地图一般修正方向为正北方就需要这个widget ...

  8. 前端学习笔记--CSS3

    本本记录了css3的样式:浏览器支持度.圆角边框.阴影.文字与文本.过渡.动画.2d旋转.3d旋转 浏览器支持度: 1.圆角边框 例:只要确定了x.y值,就能知道弧度 画一个圆形:长=宽,border ...

  9. HTML 学习笔记 CSS3 (多列)

    CSS3多列 通过CSS3 我们能够创建多个列来对文本进行布局. 在这篇文章中 你将了解到如下多列属性: column-count column-gap column-rule 浏览器支持: 多列的属 ...

随机推荐

  1. 好推二维码如何通过应用宝微下载支持微信自动打开APP下载？

    好推二维码 官网 http://www.hotapp.cn 1. 为什么使用应用宝微下载? APP下载二维码,通过微信扫描下载的时候,微信目前只支持应用宝微下载,才能在微信里直接打开下载,否则就需要在 ...

  2. NSTimer 定时器总结

    一.初始化方法:有五种初始化方法,分别是 + (NSTimer *)timerWithTimeInterval:(NSTimeInterval)ti invocation:(NSInvocation ...

  3. 01_iOS开发需要准备什么？

    本文目录 一. 前言 二.IOS开发准备 前言 相信现在的你已经有了一台安装了Xcode或者搭建好Objective-C的电脑了,由于我自己装了黑苹果,所以以后的内容都会直接从黑苹果上运行的Xcode ...

  4. Android 手机卫士--事件传递&响应规则

    问题的提出: 本文地址:http://www.cnblogs.com/wuyudong/p/5911187.html ,转载请注明源地址. 前面的文章实现了点击SettingItemView条目的时候 ...

  5. OC 中的block存储位置

    以下所有在ARC情况下: 一.block块的存储位置(block块入口地址):可能存放在2个地方:代码区.堆区(程序分5个区,还有常量区.全局区和栈区,对于MRC情况下代码还可能存在栈区.关于分区详细 ...

  6. iOS之 opencv3.0.framework

    本文章的目的是从源代码包中编译出opencv2.framework供IOS开发使用. 基本上是按照http://docs.opencv.org/3.0-beta/doc/tutorials/intro ...

  7. Windows下 maven3.0.4的安装步骤+maven配置本地仓库

    简单讲下maven的安装步骤: 1.在安装maven之前,先确保已经安装JDK1.6及以上版本,并且配置好环境变量. 2.下载maven3,最新版本是Maven3.0.4 ,下载地址:http://m ...

  8. nodejs API

    1.querystring参数处理 序列化 > querystring.stringify({'name':'scott',course:['jade','node'],from:''}) 'n ...

  9. Win8.1RTM英文版安装中文语言包的两种方法

    Windows 8.1和Windows Server 2012 R2 RTM出来了,下载了个英文版的安装上了,发现远景上有朋友提供中文语言包,以下提供两种语言包的安装方法: 一.使用lpksetup命 ...

  10. English -有感过四六级后的托福单词表-附下载

    好像自从上学期不高不低过了六级之后就没怎么持续接触英语的东西了,欧,除了要debug的时候遇到问题了,去Google到了再用那些仅有的英语知识去看别人的文章.可能是因为看到的都是自己平时接触过的方面的 ...