<a href="#main">前面又一些对你可能不是特别重要的前言，你可以点击我跳过。</a>
很久以前接了一个项目，里面需要用到一些字体小于12px的字，然后发现chrome不支持，当时是一个个用transform:scale()改过来的，并且判断每个浏览器是不是chrome。然后在不久前准备做一个小小的js库来直接引用然后让其效果和火狐这种支持小字体的浏览器一样。十几天前还不支持小字体的chrome在今天突然就支持了小字体。wcnm。
然后项目就变成了 “如何让使用transform:scale(0.5)获得的小字体的显示效果和直接使用了font-size:6px;的效果一样。”期间遇到了使用element.style.fontSize只能够获取写在标签内的样式的问题，以及关于transform中的矩阵的问题。
通过正常的js代码也就是element.style.fontSize这种是无法获取到写在style标签以及css文件里面的属性的，那么我们应当如何获得呢？
可以使用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里面的属性名就行了，感兴趣的可以详细了解这个方法。
现在问题又来了，得到transform之后，console.log会在控制台看到
matrix(0.5, 0, 0, 0.5, 0, 0)，也就是这个值包含了所有的transform变换在里面。那么这个是什么意思呢？
<a name=main>关于transform中的matrix</a>
对了，你可能需要先看张鑫旭张大神的文章，他解释的比我好很多，我的这篇文章可能只是想讲出我自己的想法。奉上链接...
首先，我们所有看到的东西都可以视为图片，例如，我们对于一个有长宽的div进行缩放，那么我们可以将这个div视为一张图片，当你缩小为0.5倍的时候，那么面积就变为1/4倍，并且这个缩放是有中心点的，中心点的闻之可以用transform-origin:100px 200px;来更改。
然后图像是由一个个的像素点所构成的，那么偏移指的就是图片中的每一个像素点按照指定的规则进行偏移，假设原本的位置为（x,y）那么偏移后的位置则为（x+30,y+30），这个可以认同吧？
然后是缩放，由于缩放是有缩放算法的，可以去了解了解。
但是缩放的话我们可以这么想象，一幅图片宽高缩小为0.5倍，那么面积会变成1/4，这个在整体的情况下是可以很容易就想出来的，但是当你去细究的时候，你会发现，无论怎么说，屏幕都是一个个像素点组成的，jpg，png等图片也是一个个的像素点组成的，然后像素点的宽高根据你的屏幕分辨率来说确定的，也就是说没有0.5px这种说法，那么是怎么将宽度缩小为原来的一般的？是直接丢弃一些像素点？很明显的不是，缩放是有特定的算法的，属于图像处理的部分。
但是关于transform:scale这个的缩放，我们可以直接从宏观的方面考虑，都学过坐标吧？每个坐标都拥有最小的单位长度，缩放呢，就只是将单位长度进行缩放（也就是说我们允许用0.5px做为单位长度1，但是实际情况不是的。有兴趣的同学可以去查查图像处理里面的缩放。），数值并不进行改变，这也就会使得你在用js获取这个的宽高的时候会发现，他们的宽高的数值并没有改变，但是在视觉上改变了。
关于旋转，我们可以用极坐标的方式进行计算。可以看图：
好了，前面的一些解释可以和下面的进行印证。
话说我们获得了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则可代表着旋转。分别为cosθ,sinθ,-sinθ,cosθ。transform:ratate(7deg)就是顺时针旋转7度。
抱歉，这篇文章由于隔了太长的时间了，可能需要点时间自己去填坑。
