5

我正在尝试旋转一个图标，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>

4

2 回答 2

8

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

来自 W3C：

可变形元素

可转换元素是属于以下类别之一的元素：其布局由 CSS 盒模型控制的元素，该模型可以是块级或原子内联级元素，或者其显示属性计算为 table-row、table-row -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>

于 2014-12-16T21:24:23.240 回答
1

使用 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>
于 2014-12-16T21:40:15.217 回答