用 3d 透视翻转圆圈答案

【问题标题】：Flip circle with 3d perspective用 3d 透视翻转圆圈
【发布时间】：2017-07-22 05:53:02
【问题描述】：

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

这里有一个小sn-p 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;
}

【问题讨论】：

标签： css 3d rotation flip perspective

【解决方案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*/

【讨论】：