css3中transform对行内元素(inline)无效？

Question

        a{
            transition: all 0.1s ease-in;
        }
        a:hover{
            transform:rotate(10deg);
        }

预期效果是鼠标滑过,链接上的文字会有一个旋转的效果.
结果测试了几个浏览器都无效,
后来发现必须要把a元素设置为 display:inline-block
这是transform本身就对inline元素无效还是一个浏览器bug?

Answer 1

参考手册链接
查参考手册，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].

作者：顾轶灵
链接：https://www.zhihu.com/questio...
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

Answer 2

transform不支持inline