<a href="#main">前面又一些對你可能不是特別重要的前言，你可以點擊我跳過。</a>
很久以前接了一個項目坷襟，里面需要用到一些字體小于12px的字，然后發(fā)現(xiàn)chrome不支持生年，當(dāng)時是一個個用transform:scale()改過來的婴程，并且判斷每個瀏覽器是不是chrome。然后在不久前準(zhǔn)備做一個小小的js庫來直接引用然后讓其效果和火狐這種支持小字體的瀏覽器一樣抱婉。十幾天前還不支持小字體的chrome在今天突然就支持了小字體档叔。wcnm。
然后項目就變成了 “如何讓使用transform:scale(0.5)獲得的小字體的顯示效果和直接使用了font-size:6px;的效果一樣蒸绩《灼眩”期間遇到了使用element.style.fontSize只能夠獲取寫在標(biāo)簽內(nèi)的樣式的問題，以及關(guān)于transform中的矩陣的問題侵贵。
通過正常的js代碼也就是element.style.fontSize這種是無法獲取到寫在style標(biāo)簽以及css文件里面的屬性的届搁，那么我們應(yīng)當(dāng)如何獲得呢？
可以使用window.getComputedStyle這個方法窍育。
example：
CSS文件中有：
.height_width_chrome{
-webkit-transform:scale(0.5);
}
js文件中這么獲瓤馈：
var test2=document.getElementsByClassName('height_width_chrome');
var transform=window.getComputedStyle(test2[0],null).getPropertyValue("transform");
以字符串的形式返回，getPropertyValue里面直接寫css里面的屬性名就行了漱抓，感興趣的可以詳細(xì)了解這個方法表锻。
現(xiàn)在問題又來了，得到transform之后乞娄，console.log會在控制臺看到
matrix(0.5, 0, 0, 0.5, 0, 0)瞬逊，也就是這個值包含了所有的transform變換在里面显歧。那么這個是什么意思呢？
<a name=main>關(guān)于transform中的matrix</a>
對了确镊，你可能需要先看張鑫旭張大神的文章士骤，他解釋的比我好很多，我的這篇文章可能只是想講出我自己的想法蕾域。奉上鏈接...
首先拷肌，我們所有看到的東西都可以視為圖片，例如旨巷，我們對于一個有長寬的div進(jìn)行縮放巨缘，那么我們可以將這個div視為一張圖片，當(dāng)你縮小為0.5倍的時候采呐，那么面積就變?yōu)?/4倍若锁，并且這個縮放是有中心點的，中心點的聞之可以用transform-origin:100px 200px;來更改斧吐。
然后圖像是由一個個的像素點所構(gòu)成的拴清，那么偏移指的就是圖片中的每一個像素點按照指定的規(guī)則進(jìn)行偏移，假設(shè)原本的位置為（x,y）那么偏移后的位置則為（x+30,y+30）会通，這個可以認(rèn)同吧口予？
然后是縮放，由于縮放是有縮放算法的涕侈，可以去了解了解沪停。
但是縮放的話我們可以這么想象，一幅圖片寬高縮小為0.5倍裳涛，那么面積會變成1/4木张，這個在整體的情況下是可以很容易就想出來的，但是當(dāng)你去細(xì)究的時候端三，你會發(fā)現(xiàn)舷礼，無論怎么說，屏幕都是一個個像素點組成的郊闯，jpg妻献，png等圖片也是一個個的像素點組成的，然后像素點的寬高根據(jù)你的屏幕分辨率來說確定的团赁，也就是說沒有0.5px這種說法育拨，那么是怎么將寬度縮小為原來的一般的？是直接丟棄一些像素點欢摄？很明顯的不是熬丧，縮放是有特定的算法的，屬于圖像處理的部分怀挠。
但是關(guān)于transform:scale這個的縮放析蝴，我們可以直接從宏觀的方面考慮害捕，都學(xué)過坐標(biāo)吧？每個坐標(biāo)都擁有最小的單位長度闷畸，縮放呢尝盼，就只是將單位長度進(jìn)行縮放（也就是說我們允許用0.5px做為單位長度1，但是實際情況不是的腾啥。有興趣的同學(xué)可以去查查圖像處理里面的縮放。）冯吓，數(shù)值并不進(jìn)行改變倘待，這也就會使得你在用js獲取這個的寬高的時候會發(fā)現(xiàn)，他們的寬高的數(shù)值并沒有改變组贺，但是在視覺上改變了凸舵。
關(guān)于旋轉(zhuǎn)，我們可以用極坐標(biāo)的方式進(jìn)行計算失尖“⊙伲可以看圖：
好了，前面的一些解釋可以和下面的進(jìn)行印證掀潮。
話說我們獲得了matrix(0.5, 0, 0, 0.5, 0, 0)菇夸，這個代表了縮小為0.5倍。首先用字母替代（看了張大佬的文章仪吧，感覺這篇文章里面充斥了他的做法庄新。）matrix(a,b,c,d,e,f)。
那么a,d代表縮放薯鼠，分別為x&y軸上的縮放择诈，transform:scale(x,y)，scale是支持x出皇，y方向不同縮放大小的羞芍。
e,f代表從原點的偏移，transform: translate(30px, 35px);像這樣郊艘，表示每一個像素x方向加30px荷科，y方向加35px;
a,b,c,d則可代表著旋轉(zhuǎn)。分別為cosθ,sinθ,-sinθ,cosθ纱注。transform:ratate(7deg)就是順時針旋轉(zhuǎn)7度步做。
抱歉，這篇文章由于隔了太長的時間了奈附，可能需要點時間自己去填坑全度。
