关于transform 对行内元素无效的一点笔记

关于transform 对行内元素无效的一点笔记

一次开发中写样式，想要实现，鼠标进入某节点，判断节点是否含有子数组，如果有就显示下拉箭头，当鼠标进入该节点元素时，翻转箭头方向朝上

实现过程中，一切过程正常，项目是vue的，
添加样式代码如下

//  当鼠标进入 mouseenter事件触发时，将节点的index赋值给deptIndex，然后判断加样式
<i v-if="deptShowList[i].haveChild" class="icon iconfont iconxiala-copy" :class="deptIndex >= 0?'nav_icon':''" />
///  分割线、。。。。、
.nav_icon {
        transition: 0.35s all linear;
        transform: rotateX(180deg);
    } 

以上
但是发现样式加上了，但是并没有实现想要的旋转效果，一顿分析，查询，样式和写法并没有问题

最后一个同事提醒好像以前遇到过，加一行 display： inline-block

.nav_icon {
        display: inline-block;
        transition: 0.35s all linear;
        transform: rotateX(180deg);
    } 

然后探究为啥不加不行，
参考链接： https://www.cnblogs.com/fayin/p/9755590.html
transform 对于行内元素不生效，试了一下display： inline;实现不了效果

总结： transform 对行内元素不生效，需要改变元素为块元素或行内块元素

如有不足，欢迎交流补充