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

Question

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

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

TRENDING NOW&#160;
<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

追踪自旋：

如果这让我感到困惑，让我跟踪所需的输出

初始状态：◄
半圈：►
全旋转：◄
重复

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

Answer 2

I've marked the most helpful answer for this question to @Roy . His answer will be useful for all users who are wondering how to achieve reflection by rotation effect with font awesome.

为了获得更实用的答案，我想分享我对标记答案的看法。这样做是为了处理问题的第二个要求（闪烁的名声效果）（这个是给未来好奇的人的）

这是解决我问题的实现：

<span class="fa-trending fa-stack" style="color:#CF4D35; font-size:20px;">
<i class="fa fa-fire flicker flicker-hor fa-stack-2x"></i>
<i class="fa fa-fire flicker flicker-hor2delay fa-stack-1x" style="color:#FFDF9F"></i>
</span>

我只是将@Roy 的解决方案与另一个动画叠加在一起，并添加了一个从 Y-360 到 Y-0 的反向旋转（而不是延迟；这当我看到@Roy 的代码) 时，我曾以为我会出于我的目的使用它。原因：延迟使火焰看起来不一致所以我使用了反向旋转。

I recon, there is a inbuilt class in font awesome to simply make inverse starting points. That works too and you can avoid two extra css-classes that way.

您可以通过查看下面的代码片段来了解它的工作原理：

.flicker {
  perspective: 2000px;
  height: 20px;
  /* caution: change this value along with font-size on html for the perfect flame ;) */
  border-bottom: thin solid #CF4D35;
  overflow: hidden;
}
.flicker-hor2delay: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: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}
@keyframes filckering {
  from {
    transform: rotateY(3600deg);
  }
  to {
    transform: rotateY(0deg);
  }
}
.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);
  }
}
/*credits to @Roy for the code */

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />TRENDING NOW
<br/>
<span class="fa-trending fa-stack" style="color:#CF4D35; font-size:20px;">
<i class="fa fa-fire flicker flicker-hor fa-stack-2x"></i>
<i class="fa fa-fire flicker flicker-hor2delay fa-stack-1x" style="color:#FFDF9F"></i>
</span>

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

Flipping an icon HORIZONTALLY and spinning it on VERTICAL axis

javascript

html

font-awesome

我想做什么？

追踪自旋：