transform 与 inline 元素的关系

[lovelmh13]

使用 transform 的时候，部分 inline 元素不会生效。

transform 对于可替换元素是生效的

一下说明了有哪些 inline 元素可以有效的使用 transform

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

翻译：

可转换元素是这些类别中的一个元素。
元素的布局由 CSS box 模型控制，该模型是块级或原子内联级元素，或其显示属性为 table-row、table-row-group、table-header-group、table-footer-group、table-cell或table-caption [CSS21] 。
SVG 命名空间中的元素，不受CSS盒子模型的约束，其属性为 transform、'patternTransform' 或 gradientTransform [SVG11]。

We should note that not all the inline elements cannot be transformed but only the non-replaced inline elements thus the replaced inline elements can be transformed.

So basically we can apply transformation to img, canvas, etc without the need of making them inline-block or block

参考：

CSS transform doesn't work on inline elements

The Transform Rendering Model