以 3d 视角翻转圆圈

Question

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

我已经倾斜了整个东西来展示我需要的东西，但最后我将只使用 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*/

以 3d 视角翻转圆圈

Flip circle with 3d perspective

css

3d

rotation

flip

perspective