的问题介绍1..box1{position:absolute;顶部：0；左：0；宽度：100px；高度：50px；背景：黑色；transform:rotate(45deg)translate(300px,300px);}.box2{position:absolute;顶部：0；左：0；宽度：100px；高度：50px；translate和rotate，这两个box的顺序不一样，但是区别很大。2..test{宽度：20px；高度：140px；背景色：鲑鱼；位置：绝对；顶部：500px；左：500px；变换：旋转（90度）；transform:scale(0.5);}.test:hover{transform:rotate(45deg);}悬停后：可以看到transform:rotate(45deg)afterhover;一开始设置的scale恢复到初始值1，可以看出transform是组件化的，二维图像的变化不仅仅是简单的skew(),scale(),rotate(),translate()等.Matrixmatrix()CSS函数matrix()使用六个指定的值来指定一个统一的二维(2D)变换矩阵。此矩形中的常量值不作为参数传递，其他参数按主要列的顺序描述。比如transform:'translate(tx,ty)rotate(a)skew(b)scale(sx.sy)'意思是先平移坐标系，然后旋转，再倾斜再缩放到新的坐标系。即新坐标系中的点先经过scale，然后skew，然后旋转，再平移，再对应到旧坐标系中的点。Matix是如何工作的？引用的文字是在笛卡尔坐标系中，欧几里得空间中的每个点都是由横坐标和纵坐标这两个值决定的。在CSS（和大多数计算机图形）中，原点(0,0)是元素的左上角。每个点都使用数学矢量符号(x,y)进行描述。每个线性函数用一个2×2的矩阵来描述，如：[ac][bd]对上述坐标系中的每个点进行矩阵乘法，形成一个变换：可以在一行中进行多次矩阵乘法变换：使用这种方法，可以描述并组合最常见的变换，例如：旋转、缩放或拉伸。（实际上，可以描述所有线性函数的变换。）组合变换从右到左进行。然而，有一种常见的非线性变换，当以这种方式表示时应单独列出：位移。位移矢量(tx,ty)必须单独表示为两个附加参数。上面的例子可以写成transform的一个明显属性是通过参数由Matrix矩阵计算出来的。计算方法translate(tx,ty)transform:matrix(1,0,0,1,tx,tx)这两个是等价的，也就是说translate的两个参数是通过transform到第五个和第六个参数来计算的。同scale(sx,sy)matrix(sx,0,0,sy,0,0)也是等价的。如果是旋转rotate()，三角函数rotate(θ)matrix(cosθ,sinθ,-sinθ,cosθ,0,0)skew()使用tan()skew(θ)matrix(1,tan(θy),tan(θx),1,0,0)再通过上面的矩阵相乘公式，就可以计算出Matrix函数的参数值。在问题1中，可以表示为[1,0,300][cos45°,-sin(45°),0][0,1,300]*[sin45°,cos45°,0][0,0,1][0,0,1]逆矩阵乘法不满足交换律。当translate(300px,300px)和rotate(45deg)两个顺序互换时，矩阵相乘的结果参数不同。因此，对应的效果也会不同。问题2中，原始变换通过旋转和缩放将两个矩阵相乘，给出Matrix()函数参数。但是，一旦再次将transform设置为rotate()，Matrix()函数的参数就会被重置，所以transform之前设置的属性才会消失。结语原本的CSS3问题，为什么不知不觉变成了线生成问题--
