翻转与3d透视的圈子

Question

我有3个圈子 一个用于前视图（感叹号 - 绿色） 一个用于支持正面和背面的视图（圆圈 - 红色） 一个用于后视图（停止后退）

这是一个小片段 https://jsfiddle.net/modo9grp/

我倾斜整个事情以显示我需要的东西，但最后我将只使用rotateY。 所以这就是我想要创造的东西，我再次提出了一些观点，但绿色需要在顶部，红色在中间，蓝色在后面。

期待结果，当我使用rotateY时，当rotateY达到180度时，整个圆圈应该翻转，蓝色圆圈必须完全可见。

另外还有奖励，我想为此添加一点厚度，所以我不知道也许我必须在前面添加2个红色圆圈，在蓝色中添加另一个红色圆圈。

您怎么看？

<div class='rewardIcon'>
  <div class='contIcon'>
  <span class='fa fa-stop-circle'></span>
  </div>
   <div class='contIcon'>
  <span class='fa fa-circle'></span>
  </div>
   <div class='contIcon'>
  <span class='fa fa-exclamation-circle'></span>
  </div>
</div>

.rewardIcon{
  position:absolute;
  transform: rotateX(50deg) rotateY(140deg);
  transform-style: preserve-3d;
  left:200px
}

.contIcon{
  position:absolute;
  font-size:160px;

  transform-style: preserve-3d;
}

.fa-stop-circle{
  color:blue;
}

.fa-circle{
  color:red;
}

.fa-exclamation-circle{
  color:green;
}

Answer 1

这是更新

https://jsfiddle.net/modo9grp/2/

但如果有人知道如何围绕圆圈制作边框，请不要犹豫。

感谢

我必须添加

transform-origin: center center; /*on the main container*/
transform: translateX(-50%);/*on the icon container*/
transform:translateZ(1px);/*on the icons*/