用猴子思维理解matrix()
matrix()？矩阵？喵喵喵？国家教育我到底有什么目的？
那么，在把中学数学忘得一干二净的情况下，要怎么理解matrix()的用法？
本文略长，需要结果的请点击文章左侧的导航直达“总结”处。
大胆实验
我们可以看到matrix()一共有六个参数，我会直接修改参数，然后看运行结果，用这种做实验的方式来强行理解每个参数的作用。本文用带圈的数字作为代数：matrix(①,②,③,④,⑤,⑥)，根据侧边栏上的索引也可以找到具体参数的实验。
实验1：位移参数（最后两参数）
⑤&⑥参数
矩阵的默认值是transform:matrix(1,0,0,1,0,0)，红盒六个参数都用默认值。
操作：尝试修改后面两个参数。
** 观察：**后面两个参数是位移参数，单位是像素，以元素起始点为原点进行位移（元素起始点就是元素左上角）。
实验1小结
⑤参数=水平位移像素值，数值由左至右递增，以元素起始点为原点。
⑥参数=垂直位移像素值，数值由上至下递增，以元素起始点为原点。
实现位移，效果同**translate()**函数。
实验2：缩放参数（第一四参数）
为了方便观察，我先把四个块挪到不同象限以便观察，接下来的几个实验都是这样摆放四个盒子，所以后两位参数不用研究它，不是我要表达的重点。除了后两位的位移参数，红盒前四个参数保持默认值。
①参数
操作：这次尝试修改第一个参数。
观察结果：肉眼可见除红盒之外的三个盒子的宽度发生了变化，变化之后的宽度是原来的宽度乘以这个参数得来的；而当参数为负数时，整个元素进行了水平翻转，文字也变成了镜像；变化以元素中心点为原点。
④参数
操作：这次尝试修改第四个参数
观察结果：这次宽度保持不变，高度则有了变化 ，变化规则和宽度一样。
①&④参数
操作：同时修改第一个和第四个参数，用一样的绝对值。
观察结果：等比缩放。
实验2小结
①参数=宽度缩放倍数值，为负数时水平翻转，以元素垂直中心线为轴。
④参数=高度缩放倍数值，为负数时垂直翻转，以元素水平中心线为轴。
两个参数能实现缩放，相等时，实现等比缩放，效果同**scale()**函数。
实验3：倾斜参数（第二三参数）
②参数
操作：这次尝试修改第二个参数
改变第二个参数后，元素变成了平行四边形，平行边之间的距离保持不变，但是横边垂直方向发生了倾斜，并且可以无限边长（不知道是否能传达我的意思，总之，大家自行体会）。和前面三个实验不同的是，这次没办法用肉眼观察出倾斜幅度是按什么单位来的。此时，我掏出了量角器，在屏幕上比划了下。
以水平线为零刻度线进行测量，得到结果：红盒≈0°；绿盒≈26.5°；黄盒≈45°；蓝盒≈-35°。这时，我把测量结果和第二个参数放在一起对比一下，使用肉眼尝试寻找一下逻辑关系。
| 四个盒子 | 红盒 | 绿盒 | 黄盒 | 蓝盒 |
|---|---|---|---|---|
| 倾斜角度 | 0° | 26.5° | 45° | -35° |
| 第二参数 | 0 | 0.5 | 1 | -0.7 |
| 我的猜想 | tan0°=0 | 喵喵喵？ | tan45°=1 | 喵喵喵？ |
我再举个特殊的例子，假设我们把元素的横边的倾斜角度拉到90°，这可能吗？这不就是和tan90°一样，是不存在的呀。
所以，私以为，此番猜想没毛病。
**观察结果：**元素垂直方向顺时针发生倾斜，此参数控制倾斜幅度。
##### ③参数
**操作：**这次尝试修改第三个参数
**观察结果：**理解第二个参数之后，第三个参数就不用解释了。
##### ②&③参数
之前修改这两个参数，都是在另一个参数完全不动的情况下进行，但是如果两个参数同时改变呢？
**操作：**这次尝试同时修改第二和第三个参数
**观察结果：**当这两个参数互为相反数，即相加为零，可以实现整个元素的旋转。
但是这样的旋转不是我们要的结果，因为矩形改变了尺寸，那要怎么保持原始尺寸呢？俺不知道，先瞎JB旋转45°做个实例，肉眼观察一下。
再次十分愚蠢地掏出我的度量衡工具！
| 显示设备 | ipad mini显示器 | 笔记本显示器 | 24寸显示器 | |||
|---|---|---|---|---|---|---|
| 测量对象 | 长 | 宽 | 长 | 宽 | 长 | 宽 |
| 红色矩形 | 4.3cm | 3.5cm | 4cm | 3cm | 4.9cm | 3.7cm |
| 绿色矩形 | 6.1cm | 4.95cm | 5.7cm | 4.2cm | 6.9cm | 5.2cm |
| 我的联想 | 4.3/6.1≈0.705 | 3.5/4.95≈0.707 | 4/5.7≈0.701 | 3/4.2≈0.714 | 4.9/6.9≈0.710 | 3.7/5.2≈0.711 |
| (0.705+0.707+0.701+0.714+0.710+0.711)/6=0.708≈0.707=cos45° | ||||||
激情实践
分析完六个参数，你是不是觉得我在扯淡，那么，来，试一下。
效果要求：坤坤从画面左下角位移到画面右上角，并缩小成一颗小星星，过程中进行多圈旋转，制造出动漫中被一拳K到外太空的效果。
实践步骤：
1、收集素材图片：坤坤、蓝天、小星星。
2、整理思路：首先，设置位移参数，算好右上角的像素位置；其次，缩放到0.01；再次，来个18圈吧。
3、渐变设置：设置transition属性好方便观察变化过程。
实验总结
实验做完，我们来总结一下：
matrix(1,0,0,1,0,0)，matrix(①,②,③,④,⑤,⑥)
| 参数 | 初始值 | 变形起点 | 数据类型 | 参数 |
| ① | 1 | 中心点 | 倍数 | 元素水平方向缩放的倍数 |
| ② | 0 | 中心点 | 正切值 | 元素水平边界顺时针倾斜角度的正切值 |
| ③ | 0 | 中心点 | 正切值 | 元素垂直边界逆时针倾斜角度的正切值 |
| ④ | 1 | 中心点 | 倍数 | 元素垂直方向缩放的倍数 |
| ⑤ | 0 | 左上角 | 像素值 | 元素水平方向位移的像素值 |
| ⑥ | 0 | 左上角 | 像素值 | 元素垂直方向位移的像素值 |
若要实现位移效果，matrix(1,0,0,1,x,y)；
若要实现缩放效果，matrix(x,0,0,y,0,0)；
若要实现倾斜效果，matrix(1,tanA,tanB,1,0,0)；
若要实现旋转效果，matrix(cosA,sinA,-sinA,cosA,0,0)；
发散思维
matrix()存在的意义是什么？
我们已经有了translate()、scale()、skew()和rotate()这样的变形函数可以实现我们要的效果，为什么还要学习matrix()这么晦涩难懂的函数？
首先，for 记性差的朋友，记一个matrix单词，还是比记四个英语单词要简单的多；
其次，for 想显摆的朋友，会矩阵函数好像是显得牛掰一点点；
最后，for 喜欢抄近道的朋友，希望解决问题的时候，使用最短路径，越短越好，当然，前提是你需要经常用到这些功能。
变形函数混写等于matrix()么？
已知transform的函数们是可以写在一起的，那么混写的transform等同于matrix()么？好吧，我以为是一样的，实操了一下，呵呵。此处应该有一篇文章，《变形函数混写不等于matrix()》。
房贷房
怎么理解三维矩阵函数matrix3d()？
进阶版《用猴子思维理解matrix3d()》，了解一下。
我的想法
为了理解matrix()，我在网上找了两三篇文章进行参考，都是以矩阵乘法来解释matrix()，我是看不懂的，在这些算式面前，我就像一只刚从山里出来的猴子，瞅着好新鲜好高级哟。当我把他们的结论放进代码中运行，却无一正确，是的，一个都不对！这到底是哪里出了问题？有时间把那么复杂的算式算清楚，没时间建个html实操一下？程序员们对自己的智商是不是过于自信了点？“猴子思维”是我自嘲且自谦的说法，我喜欢简单粗暴地从结果反推过程的思维方式，我认为明确了解目的地，才能推理出最短路径。我们思考，是为了解决问题，是为了能够把复杂的东西进行简单的输出，而不只是为了显得比别人聪明点，不是么？