inline的盒子设置transform不生效

目录

• • 如何遇到的问题
  • 原因
  • 为什么会这样
  • 怎么解决

如何遇到的问题

最近在开发过程中，因为需要对一个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";
  }