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/

通过将容器宽度和高度更改为400px，然后将所有边平移到容器宽度为200px的一半来设置大小。

这个问题让我很困惑，请有人给我一些帮助。在此先感谢:)

Answer 1

容器似乎是改变此部分的屏幕后面的正方形

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

}

到

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

}

然后将变换更改为200px;似乎工作。见here

如何重新调整3D CSS多维数据集的大小

1 个答案: