一流的商城网站建设制作网页的教程
目录
- 如何遇到的问题
- 原因
- 为什么会这样
- 怎么解决
如何遇到的问题
最近在开发过程中,因为需要对一个icon进行旋转,而icon本身,是设置span的伪类来进行的,结果我发现无论怎么设置transform都无法使其生效。
span::before {font-family: element-icons !important;content: "\e6c9";transform: rotate(180deg);}
原因
经过我的测试和网上找到的原因,它们相互印证这样一个结论:inline的盒子设置transform不生效。
为什么会这样
inline元素被视为一行中的文本片段,其大小由内容决定,并且不允许通过transform属性来改变其尺寸、位置或旋转。transform属性通常用于块级元素或行内块级元素,因为这些元素有明确定义的宽度和高度,可以进行变换操作。
怎么解决
要解决这个问题,可以将元素的display属性更改为inline-block或block。这样做后,transform属性就会生效。
span::before {font-family: element-icons !important;content: "\e6c9";transform: rotate(180deg);display: inline-block;}
如果你仍然希望元素保持display: inline,但仍然需要应用变换效果,可以考虑将元素包裹在一个块级元素中,然后在该块级元素上应用transform属性。
<div class="outer-wrapper"><span class="inline-box"></span>
</div>
.outer-wrapper {transform: rotate(180deg);}.inline-box::before {font-family: element-icons !important;content: "\e6c9";}