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. oracle应该安装在什么版本的linux下

    今天想在我的ubuntu上安装oracle 11g r2,在网上所有了一些教程,然后找到了oracle官网网站的Operating System Requirements,内容如下: Operatin ...

  2. 生成iOSAPP的二维码

    1.打开iTunes,在"应用"里面搜索要找的APP 2.右键要生成二维码的APP,选择"拷贝链接" 3.百度一个二维码生成器 4.把刚才拷贝的链接粘贴进去,点 ...

  3. Android 显示意图激活另外一个Actitity

    1.跳转到一个新的Actitity 新建项目, 新建一个java类OtherScreenActivity 继承自 Activity类 package com.wuyudong.twoactivity; ...

  4. Android 使用xml序列化器生成xml文件

    在<Android 生成xml文件>一文中使用流的形式写入xml格式文件,但是存在一定的问题,那就是在短信内容中不能出现<>之类的括号,本文使用xml序列化器来解决 xml序列 ...

  5. 优化MySchool数据库（存储过程）

    什么是“存储过程”: ---- 数据库中,用于存储“业务逻辑”的技术!(T-SQL代码当做数据一样保存到数据可) 语法 : [if exists(select * from sysobjects wh ...

  6. 开源游戏 “Elvish Bird”

    简介: 这个游戏是我在今年(2014/03)课余时闲着无聊做的一个冒险类小游戏,总共花了5个工作日才完成,为了游戏的效率,做了很多优化,目前在IE8以上浏览器能够流畅运行,运行时如果屏幕分辨率不兼容, ...

  7. Linux 折腾汇集，实时更新

    一.Linux教程 入门教程:http://www.92csz.com/study/linux/ 命令大全:http://man.linuxde.net/ 一.界面: 在Ubuntu.Linux Mi ...

  8. FreeMarker 日期转换

    ${parameters.fieldDate?date}                                           //标准日期转日期字符串 ${parameters.fie ...

  9. mysql 动态新建以及删除分区表

    因为项目需要,最近研究了一下在mysql数据库下如何动态新建以及删除分区表.如果全部借助存储过程的话,新建以及删除分区表在逻辑上比较死板.不灵活,而且还容易出错.因此,我新建了一个数据表table_f ...

  10. Java设计模式 - 适配器模式

    概念: 将一个类的接口,转换成客户期望的另一个接口.适配器模式让原来接口不兼容的类可以在一起工作. 解决的问题: 提供类似于中间人的作用:把原本不兼容.不能一起工作的接口组合在一起,使得它们能够在一起 ...