Font Awesome 5 - animated cogs, How to arrange different icons?

Question

I am trying to arrange the font awesome animated cogs in a very particular way (as per image below)

I have created a fiddle of the closest I seem to be able to get. The fiddle is here 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>

Is the arrangement I've shown in the image above achievable? If so are there any CSS tricks that can be applied?

Answer 1

You can use the classes provided by Font Awesome to achieve this. Better consider the SVG version to easily manage this.

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

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

Sizing: https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons