*每当在DOM浏览器中增加动态效果时，使用强大的transform和transition，总是很酸爽。抛开css，使用js操作transform还真的有点复杂，涉及到线性代数中的矩阵，但是js操作又不可避免的会用到。俗话说，山水有相逢，早日学会，早日总结，方便以后用到。今天就与大家分享一下，transform的注意事项以及transform矩阵操作的一些技巧。

*首先说一些小的注意事项，硬菜在后面！

1.js操作transition时需使用驼峰命名增加前缀：

2.多个transition操作的执行顺序：先写的后后执行

以下以两个div为例，点击后执行不同的过渡效果：

初始 效果：

点击后的效果：

页面代码如下，可自己拎下来运行：

3.移动端在操作结点位置时，尽量使用translate，而操作left或margin等都会引起页面回流（reflow），我们要做的就是尽可能地避免回流，尽可能的减少重绘。

举个栗子使用translate模拟垂直滚动条：

 4.矩阵操作

大家都知道当使用js获取transform时获取的是一个矩阵：

 *矩阵参数对应的变量：   matrix( a, b, c, d, e, f )，基础值为：

   matrix( 1, 0, 0, 1, 0, 0 )

基础效果如下：

1.改变位移：

改变位移效果：

2.缩放：

（1） x轴缩放：操作变量a,c,e

x轴缩放0.5效果：

（2）y轴缩放：操作变量b,d,f

y轴缩放后效果：

由此就可以解释，在使用css命令时的执行顺序问题：

3.斜切：

（1）x轴斜切：

效果如下：

（2）y轴斜切：

效果如下：

4.旋转rotate：

效果如下：

 5.transform操作函数封装

若现在有这么一个需求，每次点击div后，使其旋转30deg，那么我们是无法直接操作transform完成的，通过js修改操作css的transform无法记录当前的状态（旋转角度等）。因此需要转换思想进行函数封装，封装的原理是添加自定义属性，再利用自定义属性为相应结点添加transform。

注意！如果要获取transform相关的属性，那transform相关的设置 也必须是通过该方法设置的！

利用封装的函数，就可以完成刚才的需求。完整的代码如下，可自行运行查看效果：