transform: matrix在react native的使用
{perspective: number}, // 透视
{rotate: string}, {rotateX: string},{rotateY: string}, {rotateZ: string},
{scale: number}, {scaleX: number}, {scaleY: number},
{translateX: number}, {translateY: number},
{skewX: string}, {skewY: string}
但我们知道css3中的transform属性允许我们更多的操作，如
-2d转换相关的：
matrix()、translate、translateX、translateY、rotate、 scale、 scaleX、 scaleY、 skew、 skewX、 skewY
-3d转换：
matrix3d()、translate3d、 translateZ、 rotate3d、 rotateX、 rotateY、 rotateZ、 scale3d、 scaleZ 、perspective
/**
* perspective：指定观察者距离（z=0）平面的距离， 为元素及其内容应用透视变换，不同视距的设置会导致成像不同
**/
那在RN中，我们如何实现css支持的所有的属性呢，那么就是用到matrix，上面提到的旋转、缩放、拉伸等变换，本质上也都是应用的matrix实现的, 本文将重点介绍matrix（矩阵）的使用。
那么，什么是矩阵呢？
矩阵变换，其实本质上来说，一个元素渲染后就可以得到一张位图，然后对这个位图上每一点进行变换，就可以得到新的一张位图，从而产生平移、缩放、旋转，切变以及镜像反射等效果了，在数学线代中，也可以说矩阵的本质是运动的描述。2D变化矩阵为3*3，而3D变化为4*4的矩阵。
[ 1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1 ]
该矩阵也为单位矩阵，当给元素设置为该矩阵时，元素不会有任何的变化效果，但可自行尝试改动其中一个数字，看看效果：
第一个方形只是改动了第二行的最后一个数字，效果如上图：
<View style={[ styles.view, { transform: [ { matrix: [ 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1 ], }, ], }]}> <Text>单位矩阵</Text> </View> <View style={[styles.view]}> <Text>单位矩阵</Text> </View>
其余效果，可自行调整，尝试看看不同的效果。
reactnative中MatrixMath的源码：
/*列举其中的几个方法*/
createIdentityMatrix：返回一个初始的单位矩阵； createCopy： 拷贝传入的矩阵，生成新矩阵； createOrthographic: 正射投影；// 关于正射投影的描述，可参考这个->[http://learnwebgl.brown37.net/08_projections/projections_ortho.html]
createFrustum：视锥体投影
multiplyInto: 组合多个变换，输出最后结果； // 大部分变化最后都是调用该方法返回最终结果矩阵
...
通过查看源码，我们可以看到，通过matrix矩阵可代替我们常见的其他的变换，如：
translateX：改变矩阵的a12的值就是translateX的改变；
translateY：改变矩阵的a13的值就是translateY的改变；
translate：改变矩阵的a12,a13,a14的值就是translate的改变；
skewX：就是改变a4 = Math.sin(radians)，其中randians就是我们输入的‘60deg’,就是60度；同时还得改变a5 = Math.cos(radians)；
skewY：就是改变a0 = Math.cos(radians)，其中randians就是我们输入的‘60deg’,就是60度；同时还得改变a1 = Math.sin(radians)；
scaleX：改变a0就可以了；
scaleY：改变a5就可以了；
scale：同理把a0和a5同时改变一个数值
rotateZ：改变的是
a0 = Math.cos(radians);
a1= Math.sin(radians);
a4 = -Math.sin(radians);
a5= Math.cos(radians);
rotateY：改变的是
a0 = Math.cos(radians);
a2= -Math.sin(radians);
a8 = Math.sin(radians);
a10= Math.cos(radians);
rotateX：改变的是
a5 = Math.cos(radians);
a6= Math.sin(radians);
a9 = -Math.sin(radians);
a10= Math.cos(radians);
perspective：改变的是 a11= -1 / p;
相关参考文档链接：
