链接内元素旋转失效求助：CSS transform rotate不生效

transform 属性仅对块级元素或行内块元素生效，默认状态下 <a> 是行内元素，因此直接设置 rotate 变换不会产生效果。

修正后的代码如下：

CSS 代码 #

a{
    border: 1px solid black;
    transform: rotate(65deg);
    /* 将行内元素转为行内块，使transform生效 */
    display: inline-block;
}

HTML 代码 #

<div class="caption__link">
    <a href="#">hello</a>
</div>

添加 display: inline-block 后，<a> 元素获得块级元素的布局特性，旋转变换就能正常生效。如果是 Font Awesome 图标，只需给图标标签（如 <i>）添加同样的 display: inline-block 或 display: block 属性，再设置 transform: rotate() 即可实现旋转。

内容的提问来源于stack exchange，提问作者Agbom emmanuel