沒學過線代也能讀懂的CSS3 matrix

發表於2018-05-29

前言

CSS3 中使用 transform 可以對元素進行變換。其中包含：位移、旋轉、偏移、縮放。 transform 可以使用 translate/rotate/skew/scale 的方式來控制元素變換，也可以使用 matrix 的方式來控制元素變換。

比如：

<div class="box"></div>

1	<div class="box"></div>

通過transform屬性進行變換。

首先演示使用 translate/rotate/skew/scale 的方式：

.box {
    width: 100px;
    height: 100px;
    background: #00C487;
    transform: translate(10px, 20px) rotate(30deg) scale(1.5, 2);
}

.box {

width: 100px;

height: 100px;

background: #00C487;

transform: translate(10px, 20px) rotate(30deg) scale(1.5, 2);

}

也可以使用 matrix 的方式：

.box {
    width: 100px;
    height: 100px;
    background: #00C487;
    transform: matrix(0.75, 0.8, -0.8, 1.2, 10, 20);
}

.box {

width: 100px;

height: 100px;

background: #00C487;

transform: matrix(0.75, 0.8, -0.8, 1.2, 10, 20);

}

檢視demo

Matrix 的中文是矩陣，是一個數學術語，在電腦科學中，會用矩陣來物件量進行變換，在 CSS3 的 transform 屬性中，可以使用矩陣對影象進行變換。

矩陣長什麼樣子？

矩陣可以分為一個形容詞+一個名字，矩是形容詞，陣是名詞。

如果你喜歡看戰爭片，不管是古代戰爭還是現代戰爭，都需要有陣勢，打仗沒陣型，等於耍流氓；或者是開一局農藥，可能也要考慮各個英雄的站位，各種球類運動、各種棋類都需要有陣型。

陣型中的每一個個體對整體的都會產生影響。比如打王者榮耀射手時候，射手應該猥瑣在一個位置輸出，站錯位置，輸掉整個遊戲。

那，其實矩陣就是一些列的數字按照矩形排列。

在數學中，矩陣用方括號包裹起來。

上圖就是一個矩陣。

CSS3 裡的 matrix 如何和矩陣對應呢？

為什麼要用矩陣來表示轉換呢？因為在電腦科學中，矩陣可以對向量進行轉換。矩陣中的每一個數字，對向量的轉換都會產生影響。

CSS3 裡面可以用矩陣表示 2D 和 3D 轉換，這裡只講 2D。

selector {
    transform: matrix(a, b, c, d, e, f);
}

selector {

transform: matrix(a, b, c, d, e, f);

}

2D 的轉換是由一個 3*3 的矩陣表示的，前兩行代表轉換的值，分別是 a b c d e f，要注意是豎著排的，第一行代表 x 軸發生的變化，第二行代表 y 軸發生的變化，第三行代表 z 軸發生的變化，因為這裡是 2D 不涉及 z 軸，所以這裡是 0 0 1。

假設一個問題

建立一個寬高為 200px 的div，div 裡面有一個紅色的點，位置是{x:181px y:50px}。

倘若將這個div 向右平移 10px，x 軸向下平移 20px，旋轉37°，x軸縮放 1.5 倍，y 軸縮放 2 倍：

transform: translate(10px, 20px) rotate(37deg) scale(1.5, 2);

那麼紅色點的變化後的位置在哪裡呢？

既然我們知道矩陣可以對向量進行轉換那麼我們只要把上面的資訊轉換成矩陣資訊，通過矩陣資訊可以將我們的原始座標轉換到新的座標。

縮放 scale(x, y)

縮放對應的是矩陣中的 a 和 d，x 軸的縮放比例對應 a，y 軸的縮放比例對應 d。

transform: scale(x,y);

a=x d=y

所以 scale(1.5, 2) 對應的矩陣是：

transform: matrix(1.5, ~~0, 0,~~ 2, ~~0, 0~~);

如果一個沒有元素沒有被縮放，預設a=1 d=1。

平移 translate(10, 20)

平移對應的是矩陣中的 e 和 f，平移的 x 和 y 分別對應 e 和 f。

transform: translate(10, 20)

e=10

f=20

對應： transform: matrix(~~a, b, c, d~~10, 20);

結合縮放： transform: matrix(~~1.5 0, 0, 2,~~ 10, 20);

平移只會影響 e 和 f 值。

旋轉 rotate(θdeg)

旋轉影響的是a/b/c/d四個值，分別是什麼呢？

transform: rotate(θdeg)

a=cosθ

b=sinθ

c=-sinθ

d=cosθ

這個是高中學的哦~

如果要計算 30° 的sin值：

首先我們要將 30° 轉換為弧度，傳遞給三角函式計算。用 JS 計算就是下面的樣子了。

// 弧度和角度的轉換公式：弧度=π/180×角度 

const radian = Math.PI / 180 * 30 // 算出弧度

const sin = Math.sin(radian) // 計算 sinθ
const cos = Math.cos(radian) // 計算 cosθ

console.log(sin, cos) // 輸出 ≈ 0.5, 0.866

// 弧度和角度的轉換公式：弧度=π/180×角度

const radian = Math.PI / 180 * 30 // 算出弧度

const sin = Math.sin(radian) // 計算 sinθ

const cos = Math.cos(radian) // 計算 cosθ

console.log(sin, cos) // 輸出 ≈ 0.5, 0.866

這樣我們算出了 sin 和 cos，分別是 0.5 和 0.866

如果我們不考慮縮放和偏移，只旋轉30°，矩陣應該表示為

transform: rotate(30deg)

a=0.866

b=0.5

c=-0.5

d=0.866

transform: matrix(0.866, 0.5, -0.5, 0.866, ~~0, 0);~~

偏移 skew(20deg, 30deg)

上面的題目中沒有出現出現偏移值，偏移值也是由兩個引數組成，x 軸和 y 軸，分別對應矩陣中的 c 和 b。是 x 對應 c，y 對應 b，這個對應並不是相等，需要對 skew 的 x 值和 y 值進行 tan 運算。

transform: skew(20deg, 30deg);

b=tan30°

c=tan20°

注意 y 對應的是 c，x 對應的是 b。

transform: matrix(a, tan(30deg), tan(20deg), ~~d, e, f~~)

使用 JS 來算出 tan20 和 tan30

// 先建立一個方法，直接返回角度的tan值
function tan (deg) {
    const radian = Math.PI / 180 * deg
    return Math.tan(radian)
}

const b = tan(30)
const c = tan(20)
console.log(b, c) // 輸出 ≈ 0.577, 0.364