css3多個3d旋轉

Question

我想旋轉一個立方體的臉兩次，並讓一個臉在一側落下。

這裏有一個例子，什麼我想要實現：
http://i.imgur.com/00yAQ.png

我把我這裏現在，請注意我用45度，以顯示我的進步爲90度隱藏形狀。 http://jsfiddle.net/s6jwC/1/

<div id="stage"> 
    <div id="cube"> 
     <div id="cube_content"> 
     </div> 
    </div> 
</div> 

#stage { 
    -webkit-perspective: 400px; 
    position: relative; 
} 

#cube { 
    width: 128px; height: 128px; 
    -webkit-transform: rotateY(45deg); 
    position: absolute; 
    left: 200px; top: 30px; 
} 

#cube_content { 
    width: 128px; height: 128px; 
    -webkit-transform: rotateX(45deg); 
    position: absolute; 
    left: 0; top: 0; 
    background: rgba(255, 0, 0, 0.7); 
    -webkit-transform-origin: 0% 100%; 
} 

謝謝！

Answer 1

好的，通過學習更多關於3d變換的答案找到答案。它將-webkit-transform-style屬性應用於父變換元素，以便孩子能夠使用父母的保留3d狀態。

添加這行代碼解決了我的問題：

#cube { 
    ... 
    -webkit-transform-style: preserve-3d; 
} 

這裏有一個更新的jsfiddle與變化適用於： http://jsfiddle.net/s6jwC/3/