transform失效

<div class="wrapper">
    <span class="inline">text text text text</span>
</div>

.inline{
        //transform: rotate(30deg);
        transform: skew(30deg);
    }

场景:我用span标签写的文字不管是设置rotate（）旋转还是skew倾斜都没有任何效果。
原因：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform

图片.png
简单来说就是行内元素不支持转换。
解决：设置display: block或display: inline-block

.inline{
        /* display: block; */
        display: inline-block;
        transform: rotate(30deg);
        /* transform: skew(30deg); */
    }