：

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>是一个内联元素，并且内联元素不是'＃34;可转换的。＆＃34;只需将其display属性更改为inline-block。

来自W3C的

：

可转换元素

可变形元素是以下类别之一的元素：a   元素的布局由CSS盒子模型控制   块级或原子内联级元素，或其显示   property计算到table-row，table-row-group，table-header-group，   table-footer-group，table-cell或table-caption [CSS21]

根据W3C，内联元素未列为＆＃34;可转换＆＃34;。

例如

＆＃13;

@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);
}

＆＃13;

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

＆＃13;

Answer 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>

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

2 个答案:

：

可转换元素

例如