为什么我的图标字体图标不会保持旋转状态？

Question

我试图旋转一个图标,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);
}

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

Answer 1

这是因为它<span>是一个内联元素,并且内联元素不是"可转换的".只需将其display属性更改为inline-block.

来自W3C:

可变形元素

可转换元素是以下类别之一中的元素:布局由CSS框模型控制的元素,该框模型是块级或原子内联级元素,或者其显示属性计算为表行,表行-group,table-header-group,table-footer-group,table-cell或table-caption [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);
}

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