阿里巴巴矢量库图标 transform 旋转的解决方法。

发布时间：2019-09-29作者：laosun阅读（3053）

经过测试 transform 属性的内容运用在 iconfont 图标上都是无效的

原因：

查参考手册，transform适用于：所有块级元素及某些内联元素

A transformable element is an element in one of these categories:
an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption [CSS21]
an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, ‘patternTransform‘ or gradientTransform[SVG11].

解决方案：

既然 transform 不适用于某些内联元素，那咱们就把这些元素变成 inline-block 或 block 就行了。

案例demo:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Iconfont-阿里巴巴矢量图标库</title>
</head>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1440724_ykn3drloyzp.css">
<style>
.iconfont{
    display: inline-block
 }
 .iconfont.loadingstyle{
  color:red;
  font-size: 40px;
 }
 .if-spin {
  width: 40px;
  -webkit-animation: if-spin 2s infinite linear;
  animation: if-spin 2s infinite linear;
}
.if-pulse {
  -webkit-animation: if-spin 1s infinite steps(8);
  animation: if-spin 1s infinite steps(8);
}
@-webkit-keyframes if-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes if-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
</style>
<body>
<i class="iconfont if-spin iconloading loadingstyle "></i>
</body>
</html>