Перевернуть круг с трехмерной перспективой

У меня есть 3 круга: один для вида спереди (восклицательный знак - зеленый), один для заднего вида спереди и сзади (круг - красный), один для вида сзади (стоп-назад)

Вот небольшой фрагмент https://jsfiddle.net/modo9grp/.

Я наклонил все это, чтобы показать, что мне нужно, но в конце я буду использовать только поворот Y. Это то, что я хотел бы создать, опять же, я немного преувеличил перспективу, но зеленый должен быть сверху, красный посередине и синий сзади.

Ожидаемый результат: когда я использую 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;
}