如何重新調整3D CSS立方體的尺寸

Question

我有一個由CSS製作的立方體，可以正常工作，但是當我嘗試使它變大時，它全部崩潰。

立方體的HTML是：

<section class="container"> 
    <div id="cube" class="show-front"> 
     <figure class="front">1</figure> 
     <figure class="back">2</figure> 
     <figure class="right">3</figure> 
     <figure class="left">4</figure> 
     <figure class="top">5</figure> 
     <figure class="bottom">6</figure> 
    </div> 
</section>​ 

這裏是立方體正常工作，大小= 200像素：

.container { 
     width: 200px; 
     height: 200px; 
     position: relative; 
     margin: 0 auto 40px; 
     border: 1px solid #CCC; 
     perspective: 1000px; 
    } 

http://jsfiddle.net/B3HAq/

當我嘗試將大小設置爲400像素它不起作用。

.container { 
     width: 400px; 
     height: 400px; 
     position: relative; 
     margin: 0 auto 40px; 
     border: 1px solid #CCC; 
     perspective: 1000px; 
    } 

http://jsfiddle.net/D4zhK/

大小是通過改變容器的寬度和高度400像素，然後翻譯所有邊的一半容器設定寬度200像素。

這個問題真的讓我困惑，有誰能給我一些幫助嗎。 感謝提前:)

Answer 1

容器似乎是在屏幕後面的方改變這一節

#cube figure { 
    display: block; 
    position: absolute; 
    width: 196px; 
    height: 196px; 

}

到

#cube figure { 
     display: block; 
     position: absolute; 
     width: 400px; 
     height: 400px; 

} 

，然後改變變換到200像素;似乎工作。 見here