html - 如何重新调整 3D CSS Cube 的大小

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>​

这是正常工作的立方体，大小= 200px：

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

http://jsfiddle.net/B3HAq/

当我尝试将大小设置为 400px 时，它不起作用。

.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;

}

然后将变换更改为 200px；似乎工作。看这里