【问题标题】：Why won't my icon font icon stay rotated?为什么我的图标字体图标不会保持旋转？
【发布时间】：2014-12-16 21:18:28
【问题描述】：

我正在尝试使用transform: rotateZ(90deg) 旋转一个图标，但它似乎忽略了它。

当我向图标添加过渡时，我可以看到图标旋转的动画，但是当它完成动画时它会重新回到原位。

这里是：

@import url(http://weloveiconfonts.com/api/?family=fontawesome);

/* fontawesome */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

span {
  transition: 2s;
  border: 1px solid red;
  font-size: 500px;
}

span:hover {
  transform: rotateZ(90deg);
}

&lt;span class="fontawesome-download-alt"&gt;&lt;/span&gt;

【问题讨论】：

标签： html css icon-fonts

【解决方案1】：

这是因为<span> 是一个内联元素，而内联元素不是“可转换的”。只需将其 display 属性更改为 inline-block。

来自 W3C：

可变形元素

可变形元素是属于以下类别之一的元素：其布局由 CSS 框模型控制的元素，该模型是块级或原子内联级元素，或其显示属性计算为表行、表行组、表头组、表格页脚组、表格单元格或表格标题 [CSS21]

根据 W3C，内联元素未被列为“可转换”。

示例

@import url(http://weloveiconfonts.com/api/?family=fontawesome);

/* fontawesome */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

span {
  transition: 2s;
  border: 1px solid red;
  font-size: 500px;
  display: block;
/* ^^ Change this */
}

span:hover {
  transform: rotateZ(90deg);
}

&lt;span class="fontawesome-download-alt"&gt;&lt;/span&gt;

【讨论】：

这在规范中的某处吗？找不到任何相关信息
是的，我知道规范在哪里。但是哪里提到内联元素在转换后恢复到原来的状态？
hmmm...sn-p 仍然对我不利。
这不是问题，@SurgeonofDeath。当它被悬停时，动画又回到了向下。现在它在悬停时保持原位。
@uʍopǝpısdn，您可以在上面的规范中看到 <span> 没有被列为“可转换元素”。

【解决方案2】：

使用 DIV，而不是 SPAN；设置您的宽度和高度并添加display:block; 此外，添加-webkit-transition: 2s; 和-webkit-transform:rotateZ(90deg); 使其适用于所有浏览器。请参阅下面的代码。

<style>
@import url(http://weloveiconfonts.com/api/?family=fontawesome);

/* fontawesome */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

div {
  -webkit-transition: 2s;
  transition: 2s;
  border: 1px solid red;
  font-size: 500px;
  display: block;
  width: 470px;
  height: 470px;
}

div:hover {
  -webkit-transform:rotateZ(90deg);
  transform: rotateZ(90deg);
}
</style>

<div class="fontawesome-download-alt"></div>

【讨论】：