/ css3

关于CSS3转换-transform,使用tip

Problem:

transform在对非块级元素进行变换时,无法正常工作(测试环境chrome 46.0...,firefox42.0...)??


eg:如下,对两个span都进行transform: translate3d( 40px, 0, 0)变换,其中第一个span为默认的内联元素,第二个声明为块级元素。显然,第一个并未如期望的那样向右平移40px.

See the Pen transform对于块级元素和内联元素 by elliot (@huangxutao) on CodePen.

但是凡事都有特例,IE那坑爹的玩意,也有不坑爹的时候,不管是内联元素还是块级元素,transform都能正常工作。


可能的使用场景:

  • 对文字做一些交互动画
  • 如下:仅作demo演示不代表个人审美观(在firefox下打开更直观哦)

See the Pen transform使用tip by elliot (@huangxutao) on CodePen.


也不知道是浏览器对css3的支持不够全面,还是transform属性本身的特性 造就的bug(个人比较倾向前者),如果有不足或错误,欢迎补充^_^


自我补充

额好吧,差点自己把自己坑了,嗯。。。。这是在MDN上的描述(链接:https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform#概述)


没错transform适用元素: transformable elements,额好吧百度,谷歌一通净是一些不相干的东西。

最终在密密麻麻的W3C上找到这样的描述(链接:http://www.w3.org/TR/css3-transforms/#transformable-element)

划红线处:

which is either a block-level or atomic inline-level element, or whose 'display' property computes to 'table-row', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-cell', or 'table-caption'

也就是说transform适用元素为块级元素或者行内块级元素。


以上均为个人实践所得,如有不足,还望补充。。