上一篇介紹了transform變形屬性缔杉，其實一系列變形函數(shù)的本質(zhì)都是matrix矩陣運算奴饮，本篇就來看看究竟是怎么運算后產(chǎn)生各種變形效果的烧给。
先看看容易點的2D矩陣matrix趋厉，共有6個參數(shù)matrix(a, b, c, d, e, f)，各參數(shù)在矩陣中的位置：
元素原本的XY軸坐標經(jīng)matrix變換后汰现，新坐標為x1挂谍，y1。計算公式如下：
這是線性代數(shù)里最簡單的內(nèi)容了瞎饲，雖然難一點的線性代數(shù)的知識全還給老師了口叙，但這點應該不難理解，橫行乘豎行嗅战。
以translate位移舉例妄田。想將其在XY軸上相對原點位置位移，很簡單translate(tx, ty);即可驮捍。你也可以用matrix實現(xiàn)疟呐。原點坐標為xy，經(jīng)translate位移后新坐標需要為x1=x+tx厌漂，y1=y+ty萨醒。根據(jù)上圖，等價于matrix(1,0,0,1,tx,ty);苇倡。例如translate(50px, 100px);等價于matrix(1,0,0,1,50,100);
同理scale縮放后新坐標需要為x1=x*sx富纸，y1=y*sy囤踩，因此等價于matrix(sx,0,0,sy,0,0);。例如scale(0.5, 1.5);等價于matrix(0.5,0,0,1.5,0,0);
位移和縮放比較簡單晓褪，rotate旋轉(zhuǎn)將元素旋轉(zhuǎn)一個角度稍微復雜點堵漱。旋轉(zhuǎn)后各像素的新坐標需要為x1=cos(a)*x-sin(a)*y，y1=sin(a)*x+cos(a)*y涣仿，因此等價于matrix(cos(a),sin(a),-sin(a),cos(a),0,0);勤庐。例如rotate(45deg);等價于matrix(0.53,0.85,-0.85,0.53,0,0);（cos(45)=0.53，sin(45)=0.85）
skew扭曲后各像素新坐標需要為x1=x+tan(ax)*y好港，y1=tan(ay)*x+y愉镰，因此等價于matrix(1,tan(ay),tan(ax),1,0,0);。例如skew(45deg);等價于matrix(1, 0, 1, 1, 0, 0);（tan(45)=1）
弄了個表：
| transform | matrix |
|---|---|
| translate(tx, ty); | matrix(1, 0, 0, 1, tx, ty); |
| scale(sx, sy); | matrix(sx, 0, 0, sy, 0, 0); |
| rotate(a); | matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0); |
| skew(ax, ay); | matrix(1, tan(ay), tan(ax), 1, 0, 0); |
有了2D矩陣matrix的基礎后钧汹，再看3D矩陣matrix3d能稍微容易理解點丈探。不廢話了直接W3C上圖
translate3d(tx,ty,tz)等價于matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,tx,ty,tz,1)
matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1)
rotate3d(x,y,z,a)真是得搬出高中數(shù)學書好好復習一下了，第四個參數(shù)alpha用于sc和sq中
等價于…你自己從上到下拔莱，從左到右依次將參數(shù)搬入matrix3d中吧碗降。當然除非是庫函數(shù)需要，否則我嚴重懷疑是否會有人放著rotate3d不用塘秦，偏要去挑戰(zhàn)用matrix3d模擬rotate3d讼渊。
總結(jié)
你可能會疑惑，誰會放著現(xiàn)成的transform內(nèi)置函數(shù)不用尊剔，去用matrix/matrix3d爪幻？除非你故意不想讓他人看懂代碼，你可以將
transform: rotate(15deg) translate(230) scale(1.5,2.6) skew(220deg,-150deg) translate(230px);
寫成
transform: matrix(1.06,1.84,0.54,2.8,466px,482px);
保證你的代碼誰也看不懂誰也改不了赋兵，知識產(chǎn)權那是妥妥的笔咽，公司辭退誰都不會辭退到你搔预。但恕我才疏學淺霹期，除了滿足個人好奇心，體會到一點智力上的優(yōu)越感外拯田，實際項目中似乎確實沒什么卵用…本篇您就當看個樂呵历造。
