transform与Matrix矩阵

问题引入

1.

.box1{
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 50px;
    background: black;
    transform: rotate(45deg) translate(300px,300px) ;
}
.box2{
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 50px;
    background:black;
    transform: translate(300px,300px) rotate(45deg) ;
}

能够看到经过transform设置的translate和rotate，2个盒子因为前后顺序不一样，可是差异却很大。函数

2.

.test{
  width: 20px;
  height: 140px;
  background-color: salmon;
  position: absolute;
  top: 500px;
  left: 500px;
  transform: rotate(90deg);
  transform: scale(0.5);
}
.test:hover
{
    transform: rotate(45deg);
}

hover后：
组件化

能够看到 hover后transform: rotate(45deg)； 使得一开始设置的scale恢复了初始值1。
因而可知，transform 是组件化的，其中的2D图像变化并不仅是单纯的skew(),scale(),rotate()，translate()等spa

Matrix

matrix()

CSS 函数 matrix() 用六个指定的值来指定一个均匀的二维（2D）变换矩阵。这个矩形中的常量值是不做为参数进行传递的，其余的参数则在主要列的顺序中描述。
举个例子code

transform: 'translate(tx,ty) rotate(a) skew(b) scale(sx.sy)'

表明将坐标系先 translate 而后 rotate 而后 skew 而后 scale 为新的坐标系。即新坐标系下的点先通过 scale 而后 skew 而后 rotate 而后 translate 后对应于老坐标系下的点。orm

那Matix是如何运算的呢？

引用文字blog

在笛卡尔坐标系中，每一个 欧氏空间 里的点都由横坐标和纵坐标这两个值来肯定。 在CSS（和大部分的计算机图形学）中，原点 (0, 0) 在元素的左上角。每一个点都使用数学上的向量符号(x,y)来描述。图片

每一个线性函数使用 2 × 2 矩阵描述，如:ip

[a c]
     [b d]

将矩阵乘法用于上述坐标系中的每一个点，一个变换就造成了：数学

能够在一行中进行屡次矩阵乘法进行变换：
it

有了这种方法，就能够描述大部分常见的变换并所以能够将他们组合起来，如：旋转、缩放或拉伸。（事实上，全部线性函数的变换均可以被描述。）组合的变换是从右到左生效的。然而，有一种常见的变换并非线性的，因此当这种变换要用这种方法来表示时，应该被单独列出来：位移。位移的向量 (tx, ty) 必须单独表示，做为两个附加参数。

而上面的例子能够写成

显而易见的
tranmsform的属性是由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中

本来transform经过rotate和scale用2个矩阵相乘赋予了Matrix()函数参数
然而transform一旦再次设置rotate()，则会将Matrix()函数参数重置，
因此才会使得transform以前设置的属性荡然无存。

结语

本来CSS3的问题， 怎么就不知不觉变成线代问题了呢 - -