矩阵可以用来表示图形的变换。css3定义了matrix和matrix3d方法，用来表示2维和3维的变换。下文将分析这两个接口的使用方法，并且用下文的思路，实现了一个简单的用js控制css3变换的jquery插件css3js ，

变换矩阵和净变换矩阵

matrix(a,b,c,d,e,f)有六个参数，这六个参数对应到矩阵如下：

⎡⎣⎢ab0cd0ef1⎤⎦⎥\begin{bmatrix}a & c & e \\b & d & f \\ 0 & 0 & 1\end{bmatrix}

在图形学上，这种叫做齐次坐标矩阵，用齐次坐标矩阵和图形的顶点相乘，就能得到变换后的新顶点的位置。比如，图形有一个顶点（a，b），现使图形整体延x轴平移100px，平移后该顶点的位置应该是（a+100，b）。很明显，下面的矩阵运算就表示了这个过程：

⎡⎣⎢10001010001⎤⎦⎥\begin{bmatrix}1& 0 & 100 \\0 & 1 & 0 \\ 0 & 0 & 1\end{bmatrix} ×\times ⎡⎣⎢ab1⎤⎦⎥\begin{bmatrix}a \\b \\ 1\end{bmatrix} = ⎡⎣⎢a+100b1⎤⎦⎥\begin{bmatrix} a+100 \\ b \\ 1\end{bmatrix}

因此，知道了这个齐次坐标矩阵，就可以算出任何一点变换后的位置，所以，这个齐次坐标矩阵就是变换矩阵。

如果该点再次延y轴平移100px，平移后的新位置应该是（a+100,b+100）,则整个过程可表示成：

⎡⎣⎢10001010001⎤⎦⎥\begin{bmatrix}1& 0 & 100 \\0 & 1 & 0 \\ 0 & 0 & 1\end{bmatrix} ×\times ⎡⎣⎢10001001001⎤⎦⎥\begin{bmatrix}1& 0 & 0\\0 & 1 & 100\\ 0 & 0 & 1\end{bmatrix} ×\times ⎡⎣⎢ab1⎤⎦⎥\begin{bmatrix}a \\b \\ 1\end{bmatrix}= ⎡⎣⎢1000101001001⎤⎦⎥\begin{bmatrix}1& 0 & 100\\0 & 1 & 100\\ 0 & 0 & 1\end{bmatrix} ×\times ⎡⎣⎢ab1⎤⎦⎥\begin{bmatrix}a \\b \\ 1\end{bmatrix} = ⎡⎣⎢a+100b+1001⎤⎦⎥\begin{bmatrix} a+100 \\ b+ 100 \\ 1\end{bmatrix}

由此可得，图形的多次变换，可以由一个净变换矩阵表示，像上面算式中的

⎡⎣⎢1000101001001⎤⎦⎥\begin{bmatrix}1& 0 & 100\\0 & 1 & 100\\ 0 & 0 & 1\end{bmatrix}

就是一个净变换矩阵，保存了两次变换的结果。净变换矩阵可由多个变换矩阵相乘得到。

2D变换

我们知道matrix(a,b,c,d,e,f)有六个参数，这六个参数对应到矩阵如下：

⎡⎣⎢ab0cd0ef1⎤⎦⎥\begin{bmatrix}a & c & e \\b & d & f \\ 0 & 0 & 1\end{bmatrix}

对于常用的2D变换，图形学的相关书籍已经指出了其变换矩阵，我们直接使用就好了：

平移

⎡⎣⎢100010xy1⎤⎦⎥\begin{bmatrix}1& 0 & x \\0 & 1 &y\\ 0 & 0 & 1\end{bmatrix}

所以translate(x,y)也可以写成`matrix(1,0,0,1,x,y)
缩放

⎡⎣⎢x000y0001⎤⎦⎥\begin{bmatrix} x& 0 & 0 \\0 & y & 0\\ 0 & 0 & 1\end{bmatrix}

所以scale(x,y)也可以写成`matrix(x,0,0,y,0,0)
旋转

⎡⎣⎢cos(x)sin(x)0−sin(x)cos(x)0001⎤⎦⎥\begin{bmatrix} cos(x) & -sin(x) & 0 \\sin(x) & cos(x) & 0\\ 0 & 0 & 1\end{bmatrix}

所以rotate(x)也可以写成matrix(cos(x),-sin(x),sin(x),cos(x),0,0)
变形
⎡⎣⎢1tan(x)0tan(y)10001⎤⎦⎥\begin{bmatrix} 1 & tan(y) & 0 \\tan(x) & 1 & 0\\ 0 & 0 & 1\end{bmatrix}

所以skew(x,y)也可以写成matrix(1,tan(y),tan(x) ,1,0,0)

这部分可以看一下 css3js 源代码的Matrix3的实现。

3D变换

matrix3d(0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15)有16个参数，这16个参数对应到矩阵如下：

⎡⎣⎢⎢⎢0123456789101112131415⎤⎦⎥⎥⎥\begin{bmatrix} 0 & 4 & 8 & 12 \\1 & 5 & 9 & 13 \\ 2 & 6 & 10 & 14\\ 3 & 7 & 11 & 15\end{bmatrix}

可以看到，这16个参数是按列排列出矩阵的。3维变换矩阵相比2维变换矩阵增加了一个维度，但是原理是相似的，也是使用齐次坐标矩阵表示变换矩阵和净变换矩阵。

在图形学上，对3维变换的变换矩阵也早有定义：

平移

⎡⎣⎢⎢⎢100001000010xyz1⎤⎦⎥⎥⎥\begin{bmatrix}1& 0 & 0 & x \\0 & 1 &0 &y\\ 0 & 0 & 1 & z\\ 0 & 0 & 0 &1\end{bmatrix}

所以translate(x,y,z)也可以写成`matrix(1,0,0,0,0,1,0,0,0,0,1,0,x,y,z,1)
缩放

⎡⎣⎢⎢⎢x0000y0000z00001⎤⎦⎥⎥⎥\begin{bmatrix}x& 0 & 0 & 0 \\0 & y &0 &0\\ 0 & 0 & z & 0\\ 0 & 0 & 0 &1\end{bmatrix}

所以scale(x,y,z)也可以写成`matrix(x,0,0,0,0,y,0,0,0,0,z,0,0,0,0,1)
旋转

3维旋转稍微复杂，因为旋转的轴有可能不是标准的x,y,z轴了，而可能是任何一个向量。一般可用欧拉角和四元数表示旋转，而欧拉旋转由于存在“万向节死锁”问题，所以最好还是用四元数来表示。

四元数，即是一个复数：p = a i +b j +c k+d，关于四元数比较难解释，可以看中文翻译《理解四元数》。幸好，四元数变换也有变换矩阵：

⎡⎣⎢⎢⎢⎢x2∗w+cos(θ)y∗x∗w+z∗sin(θ)z∗x∗w−y∗sin(θ)0x∗y∗w−z∗sin(θ)y2∗w+cos(θ)z∗y∗w+x∗sin(θ)0x∗z∗w+y∗sin(θ)y∗z∗w−x∗sin(θ)z2∗w+cos(θ)00001⎤⎦⎥⎥⎥⎥\begin{bmatrix} x^{2}*w+cos(\theta) & x*y*w - z*sin(\theta) & x*z*w+y*sin(\theta) & 0 \\ y*x*w+z*sin(\theta) & y^{2}*w+cos(\theta) & y*z*w - x*sin(\theta) &0\\ z*x*w - y*sin(\theta) & z*y*w+x*sin(\theta) & z^{2}*w+cos(\theta) & 0\\ 0 & 0 & 0 &1\end{bmatrix}

其中 w=1−cos(θ) w = 1 - cos(\theta)
使用上面的变换矩阵可以实现在坐标原点绕任意轴的旋转，所以，变换完要做一次逆变换，将图形移回原来的位置。

这部分可以看一下 css3js 源代码的Matrix4的实现。

css3 transform matrix 深入理解相关推荐

css3把矩,CSS3 Transform Matrix
css3中的transform让我们操作变形变得很简单,诸如,translate–移动,scale–缩放,rotate–旋转,skew–斜切.这几个属性很方便,也很简单,但是其中matrix我们就不常 ...
理解CSS3 transform中的Matrix(矩阵)
一.哥,我被你吓住了打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如"拉普拉斯不等式").这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面& ...
【CSS3】理解CSS3 transform中的Matrix(矩阵)
理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...
html中的matrix属性,transform,matrix属性讲解
矩阵可以理解为方阵,只不过,平时方阵里面站的是人,矩阵中是数值: → 而所谓矩阵的计算,就是两个方阵的人(可以想象成古代的方阵士兵)相互冲杀. CSS3中的矩阵 CSS3中的矩阵指的是一个方法,书写 ...
CSS3 Transform变形理解与应用
CSS3 Transform变形理解与应用 Transform:对元素进行变形: Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞. ...
html52D转换3D,CSS3 Transform 2D和3D转换
1.2 缩放语法transform : scale(x,y); -webkit-transform : scale(x,y); 根据倍数来缩放,取决于宽度(X轴)和高度(Y轴)的参数:也可以用一个参 ...
css让div旋转,CSS3 transform 属性旋转 div 元素
div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* ...
[HTML5amp;CSS3]Transform具体解释
Transform字面上就是变形,改变的意思. 在CSS3中transform主要包含以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.以下我们 ...
CSS3 Transform变形(2D转换)
Transform:对元素进行变形: Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开始,结束. Animation:对元素某个 ...

css3 transform matrix 深入理解

变换矩阵和净变换矩阵

2D变换

3D变换

css3 transform matrix 深入理解相关推荐

最新文章

热门文章