为什么行内元素的transform不生效

最近的项目开发中，我给一个span标签添加了一个 transform:rotate(45deg)的样式，但是无论我怎么调试，都不生效啊！（开始怀疑人生了）。偶然间自己加了一个 display:inline-block；竟然生效了！自己完全处于懵的状态。为啥，为啥加个display:inline-block就生效了呢！于是乎开始google。

先说结论吧

display:block可以让元素成为一个block box;

display:inline-block 会生成一个inline-level block container ， 元素本身被格式化为atomic inline-level box ,内部被格式化为 block box;

display:inline 会让一个元素生成一个或多个inline boxes;

但是可以使用transform的元素有：atomic  inline-level元素和block元素。不包含inline元素。所以…… 。

那原因是啥呢？

且容我粘贴一下transfrom的使用规范

CSS Transforms Module Level 1 - Transformable Element
A transformable element is an element in one of these categories:

• an element whose layout is governed by the CSS box model 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 [CSS2]
• an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, patternTransform or gradientTransform [SVG11].

那么上文提到的atomic inline-level element又是啥呢？

An inline box is one that is both inline-level and whose contents participate in its containing inline formatting context. A non-replaced element with a 'display' value of 'inline' generates an inline box. Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes because they participate in their inline formatting context as a single opaque box. (https://www.w3.org/TR/CSS2/visuren.html#x13)

由上所述：

• 行内盒子由一个display:inline的非替换元素生成。
• 行内级盒子又叫做原子行内级盒子，它不是 行内盒子。因为它是透明的。