• CSS3 transform的一些细节

    之前虽然用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