最近想做一下很細(xì)膩的過濾效果，想精確控制到每一幀，所以想把一些屬性搞清楚

CSS坐標(biāo)系統(tǒng)(左手坐標(biāo)系統(tǒng))

3d變換我們首先要弄清楚坐標(biāo)軸的方向， 3D變形的坐標(biāo)軸則是X,Y,Z三條軸組成的立體空間，X軸正方向是朝右，Y周正方向是朝下，Z軸正方向是朝屏幕外

坐標(biāo)軸的可視化圖

假定都是在三維空間中，平面坐標(biāo)應(yīng)該更加簡單，刻畫一個點(diǎn)的向量應(yīng)該: [x, y, z]

變換矩陣

所謂變換矩陣就是指，該矩陣 X 坐標(biāo)向量 可以得到變換后的新坐標(biāo)，滿足如下性質(zhì)

< "平移"后 的坐標(biāo)> = < 平行移動變換矩陣> X <原始坐標(biāo)>
< "縮放"后 的坐標(biāo)> = < 縮放移動變換矩陣> X <原始坐標(biāo)>
< "旋轉(zhuǎn)"后 的坐標(biāo)> = < 旋轉(zhuǎn)移動變換矩陣> X <原始坐標(biāo)>
< "斜切"后 的坐標(biāo)> = < 斜切移動變換矩陣> X <原始坐標(biāo)>

初始矩陣變化

三位坐標(biāo)中表示平移動，我們必須用4X4位矩陣
css 使用時按照矩陣列序列以此填寫即可

transfrom: matrix3d(a00, a10, a20, a30, a01, a11, a21, a31, a02, a12, a22, a32, a03, a13, a23, a33)

matrix3d 默認(rèn)值

初始化的變換矩陣

變化初始矩陣

初始化的變換乘法后的結(jié)果

變換乘法

所以matrix3d的默認(rèn)值

div {
  transform: matrix3d(1, 0, 0, 0, 0,  1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
}

旋轉(zhuǎn)

觀察者站軸的正方向看向負(fù)方向，旋轉(zhuǎn)物體，逆時針為負(fù)，順時針為正。

繞Z軸旋轉(zhuǎn)，Z軸坐標(biāo)不發(fā)生變化

旋轉(zhuǎn)示意圖

其中有

c = xcos(β) - ysin(β)
d = ycos(β) + xsin(β)

可以得到旋轉(zhuǎn)矩陣

Z軸

X軸

Y軸

移動

移動的變換矩陣

移動矩陣

dx: x軸移動的距離
dy: y軸移動的距離
dz: z軸移動的距離

縮放

縮放的變換矩陣

縮放的變換矩陣

斜切

斜切是最不好理解的，符合右手定則，如果y軸斜切角度，是指垂直Y軸逆時針旋轉(zhuǎn)一定的角度后的坐標(biāo)

斜切變換矩陣

動畫類型

在前端開發(fā)中，我們采用的動畫方案有主幀動畫 、 補(bǔ)間動畫、骨骼動畫 等等
借助css3的transform，我們可以實(shí)現(xiàn)很流暢的補(bǔ)間動畫

復(fù)合變換

如果物體發(fā)生了上面的幾種變換，可以把上面所有矩陣依次序相乘，然后就得到了最終的變換矩陣
由此我們可以看出來 一個css變換舉證 M 總可以寫成一個
M = SRT
其中 S 是縮放舉證 R 是旋轉(zhuǎn)矩陣 T是縮放舉證
變換過程中，我們可以對S R T 分別實(shí)現(xiàn)補(bǔ)間動畫，來進(jìn)行變換動畫