CSS3 transform的一些细节

GD Star Rating
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的一些细节, 4.5 out of 5 based on 2 ratings

已有3条评论 发表评论

  1. kevin /

    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?

    GD Star Rating
    loading...
  2. 长沙老郭 /

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

    GD Star Rating
    loading...
    1. zenoven / 本文作者

      是免费的

      GD Star Rating
      loading...

发表评论