css - 以 3d 视角翻转圆圈

Question

我有3个圈子一个用于前 View (感叹号 - 绿色)一个用于支持正面和背面的 View (圆圈 - 红色)一个用于后 View (stop-back)

这是一个小片段 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*/