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()等

Matrix

matrix()

CSS 函數 matrix() 用六個指定的值來指定一個均勻的二維（2D）變換矩陣。這個矩形中的常量值是不做爲參數進行傳遞的，其餘的參數則在主要列的順序中描述。
舉個例子

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

表明將座標系先 translate 而後 rotate 而後 skew 而後 scale 爲新的座標系。即新座標系下的點先通過 scale 而後 skew 而後 rotate 而後 translate 後對應於老座標系下的點。

那Matix是如何運算的呢？

引用文字

在笛卡爾座標系中，每一個 歐氏空間 裏的點都由橫座標和縱座標這兩個值來肯定。 在CSS（和大部分的計算機圖形學）中，原點 (0, 0) 在元素的左上角。每一個點都使用數學上的向量符號(x,y)來描述。

每一個線性函數使用 2 × 2 矩陣描述，如:

[a c]
     [b d]

將矩陣乘法用於上述座標系中的每一個點，一個變換就造成了：

能夠在一行中進行屢次矩陣乘法進行變換：

有了這種方法，就能夠描述大部分常見的變換並所以能夠將他們組合起來，如：旋轉、縮放或拉伸。（事實上，全部線性函數的變換均可以被描述。）組合的變換是從右到左生效的。然而，有一種常見的變換並非線性的，因此當這種變換要用這種方法來表示時，應該被單獨列出來：位移。位移的向量 (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的問題， 怎麼就不知不覺變成線代問題了呢 - -