javascript - 水平翻转图标并在垂直轴上旋转它

Question

First of all I would like to address to anyone reading this, that my question seems awfully similar to this question that was asked almost a year ago, but rest assured it is not!

这是我正在尝试处理的代码:

TRENDING NOW 
<span class="fa-trending" style="color:#CF4D35;">
<i class="fa fa-fire fa-spin"></i>
</span>

您可以在下面的代码片段中看到它正在运行:

<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />TRENDING NOW&#160;
<span class="fa-trending" style="color:#CF4D35;">
<i class="fa fa-fire fa-spin"></i>
</span>
<!-- NOT THE MAIN CODE BELOW: IGNORE THIS -->
<br/>
<br/><strong>Question:</strong> How do I rotate that flame along the vertical Y-axis so that it flips horizontally at each half-rotation to produce a flickering-flame effect?
<br/>
<br/><strong>Note:</strong> Any out of the box, bright ideas, are also entertained. However, usage of font awesome is preferable as long as it is possible

我想做什么？

而不是 font awesome 提供的通常的旋转运动，我想沿着 垂直轴 旋转字体，即，当 ◄ 转半圈时，它应该看起来像这样 ► (而不是这个样子 ▼)

I am actually trying to make a flickering flame with font awesome

追踪自旋:

如果这令人困惑，让我跟踪所需的输出

1. 初始状态:◄
2. 半圈:►
3. 全旋转:◄
4. 重复

I accept any creative ideas that will let me achieve the same result (but please don't let the alternate solution affect the page-load time. I'd ideally prefer to keep it font awesome because it is awesome)

Answer 1

你想要这样的东西吗？

更新:我想我在这里得到了你想要实现的目标。我在火的下方添加了一个固定的边框，让底座看起来是静止的，这样效果会更好。不用担心让事情变慢，因为这完全是用 CSS3 动画完成的，根本不需要 JavaScript。它会在所有方面顺利运行，不会减慢速度。

.flicker {
  perspective: 1000px;
  overflow: hidden;
  height: 15px;
  border-bottom: thin solid #CF4D35;
}
.flicker-ver:before {
  -webkit-animation: filckering 2s infinite;
  animation: filckering 2s infinite;
  display: inline-block;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
}
@-webkit-keyframes filckering {
  from {
    transform: rotateX(0deg);
  }
  to {
    transform: rotateX(360deg);
  }
}
@keyframes filckering {
  from {
    transform: rotateX(0deg);
  }
  to {
    transform: rotateX(360deg);
  }
}
.flicker-hor:before {
  -webkit-animation: filckering2 .2s infinite;
  animation: filckering2 .2s infinite;
  display: inline-block;
}
@-webkit-keyframes filckering2 {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}
@keyframes filckering2 {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />TRENDING NOW&#160;
<span class="fa-trending" style="color:#CF4D35;">
<i class="fa fa-fire flicker flicker-hor"></i>
<!--i class="fa fa-fire flicker flicker-ver"></i-->
</span>
<!-- NOT THE MAIN CODE BELOW: IGNORE THIS -->
<br/>
<br/><strong>Question:</strong> How do I rotate that flame along the vertical Y-axis so that it flips horizontally at each half-rotation to produce a flickering-flame effect?
<br/>
<br/><strong>Note:</strong> Any out of the box, bright ideas, are also entertained. However, usage of font awesome is preferable as long as it is possible