與3D立體

Question

翻轉圈我有3個圈 一個用於主視圖（感嘆號 - 綠色） 一個用於備份正面和背面（圓 - 紅色）的視圖 一個用於背面圖（停止 - 回）

這裏是一個小片段 https://jsfiddle.net/modo9grp/

我已經傾斜了整個事情，以顯示我需要什麼，但最後我將只使用旋轉Y。 所以這就是我想要創造的，再一次我已經展示了一些視角，但綠色需要在頂部，紅色在中部，藍色在後部。

預計結果，當我使用rotateY時，整個圓應該翻轉，並且當rotateY達到180deg時，藍色圓圈必須完全可見。

還有獎金，我想一點點厚度添加到這一點，所以我不知道，也許我要補充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*/