loading...
之前虽然用CSS3 transform做过动画相关项目，目的就是让元素动起来，看着比较酷炫，仅此而已。但是最近想用transform实现小于12px文字的时候却发现transform并未将由于文字过长而换行的文字改为单行，那正好趁着这个机会小小的研究一把。
用transform实现小于12px大小时的一些细节
众所周知Chrome里面（据说只有中文版，未测试）文字最小为12px，那么要实现10px的文字大小，就会用到transform
transform:scale(.5)
这对于正常的应用来说是没问题的，比如下面的例子
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
CSS3 transform的一些细节,
大佬…
暂存标签是你做的吗?
请问能否增加不保存固定标签选项…
以及新窗口打开标签选项
(或者左键当前窗口打开…中键新窗口打开)
loading...
是的，懒癌犯了好久都没更新，这两个建议蛮好，我抽时间加一下
loading...
Hi
I’m trying to change the font size on my site, however through a child theme i haven’t been able to achieve this, can you help?
loading...
站长你好，在这个网站http://www.wpmee.com/zalive/ 发现您网站的模版，不知您的模板是免费使用的吗？
loading...
是免费的
loading...