Font Awesome 5-动画齿轮，如何排列不同的图标？

Question

我正在尝试以一种非常特殊的方式来安排字体超酷的动画齿轮（如下图所示）

我创建了我似乎能获得的最接近的提琴。小提琴在这里https://jsfiddle.net/rke45798/13/

.slow-ani {
  -webkit-animation: fa-spin 6s infinite linear;
  animation: fa-spin 6s infinite linear;
}

.fa-small {
  font-size: 84px;
}

.fa-med {
  font-size: 70px;
}

.fa-lge {
  font-size: 48px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" >
<div class="cogs">
  <i class="fas fa-cog fa-small slow-ani"></i>
  <br>
  <i class="fas fa-cog fa-med slow-ani"></i>
  <i class="fas fa-cog fa-lge slow-ani"></i>
</div>

在上图中显示的排列是否可以实现？如果是这样，是否有任何CSS技巧可以应用？

Answer 1

您可以使用Font Awesome提供的类来实现此目的。最好考虑使用SVG版本来轻松管理它。

.slow-ani > * {
  animation-duration:5s;
}

<script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js" ></script>
<span class="cogs slow-ani">
  <i class="fas fa-cog fa-4x fa-spin" data-fa-transform="down-5  right-5"></i>
  <i class="fas fa-cog fa-3x fa-spin" data-fa-transform="down-17 right-3"></i>
  <i class="fas fa-cog fa-5x fa-spin" data-fa-transform="left-7"></i>
</span>

转换：https://forums.virtualbox.org/viewtopic.php?f=7&t=86922

尺寸：https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms