CSS3 transform的一些细节
之前虽然用CSS3 transform做过动画相关项目，目的就是让元素动起来，看着比较酷炫，仅此而已。但是最近想用transform实现小于12px文字的时候却发现transform并未将由于文字过长而换行的文字改为单行，那正好趁着这个机会小小的研究一把。用transform实现小于12px大小时的一些细节
众所周知Chrome里面（据说只有中文版，未测试）文字最小为12px，那么要实现10px的文字大小，就会用到transform
[code lang="CSS"]transform:scale(.5)[/code]
这对于正常的应用来说是没问题的，比如下面的例子
See the Pen font-size smaller than 12px demo1 by Bane Lee (@zenoven) on CodePen.
例1
.a是正常的20px大小，.b用font-size设置为10px但是chrome下无效，.c用transform实现10px大小。 但是当遇到空间小而数据多并且要求不换行的时候，用scale来缩小文字就会有一定的问题，如下例无论缩放多小，文字始终还是两行。
See the Pen transform has no effect by Bane Lee (@zenoven) on CodePen.
例2
那怎么解决呢？目前想到的一种方案是将元素包起来，宽度增加到足够容纳元素，然后整体scale，效果如下
See the Pen transform works by Bane Lee (@zenoven) on CodePen.
例3
问题是解决了，但是这是为什么呢？同样是用transform来scale，一个作用在父元素，一个作用在子元素，差别怎么就这么大呢？
transform不改变元素实际宽高及定位
直接上例子也许看的更清楚~
See the Pen CSS3 transform position and dimension test by Bane Lee (@zenoven) on CodePen.
例4
上例中.target被.wrapper包裹并左浮动、设置scale及translate后.target变化了，如果transform改变了元素的实际宽高就必然会导致.wrapper变化，但是实际的效果显示.wrapper没有任何改变，证明transform不会改变元素实际宽高及定位，也就是说transform并不会对相邻元素造成影响。
如何获取transform之后的视觉宽高及定位
其实例4中已经提供了一种方法，就是用getBoundingClientRect()这个方法，可以获取到transform后的尺寸及定位，具体可点此查阅MDN