ZenOven's Archivers

From zenoven on 2015-01-30 15:39:59

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

查看完整版本: CSS3 transform的一些细节

From 长沙老郭 on 2015-08-07 10:20:52

站长你好,在这个网站http://www.wpmee.com/zalive/ 发现您网站的模版,不知您的模板是免费使用的吗?

From zenoven on 2015-08-31 22:43:28

是免费的

From kevin on 2015-10-05 04:24:46

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?

From 千千万万道不明 on 2019-08-14 21:43:39

大佬... 暂存标签是你做的吗? 请问能否增加不保存固定标签选项... 以及新窗口打开标签选项 (或者左键当前窗口打开...中键新窗口打开)

From zenoven on 2019-08-16 00:21:41

是的,懒癌犯了好久都没更新,这两个建议蛮好,我抽时间加一下

Tags: CSS, transform


©ZenOven