Question

首先，我想向阅读此内容的任何人致辞，我的问题似乎与被问到的this question非常相似差不多一年前，但请放心不是！

这是我试图解决的一些代码：

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

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

＆＃13;

<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

＆＃13;

我想做什么？

而不是字体提供的通常旋转动作，我想沿着垂直轴旋转字体，即，当◄转半圈时，它应该看起来像这样►（并且看起来不像这样▼）

我实际上是想用字体真棒来制作闪烁的火焰

追踪旋转：

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

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

我接受任何可以让我获得相同结果的创意（但请不要让备用解决方案影响页面加载时间。我理想情况下更喜欢保持字体真棒，因为它很棒）

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

我已经向@Roy标记了这个问题最有帮助的答案。他的回答对所有想知道如何通过旋转实现反射效果的用户非常有用。

为了更多动手 - 实际答案，我想与明确的答案分享我自己的转折。这样做是为了处理问题的第二个要求（闪烁的名声效果）（这个对未来好奇的人来说）
这是我的实施解决了我的问题：

<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的代码时出于我的目的而使用。原因：延迟使火焰看起来不一致所以我使用反向旋转。

我重新调整，有一个内置的字体很棒，可以简单地制作反向起点。这也有效，你可以避免两个额外的css类。

您可以通过查看以下代码段看到它的工作原理：

＆＃13;

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

＆＃13;

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

＆＃13;

将图标HORIZONTALLY翻转并在VERTICAL轴上旋转

我想做什么？

追踪旋转：

2 个答案: