0

正常に動作する 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 の半分に変換することで設定されます。

この問題は私を本当に混乱させます。誰か助けてください。前もって感謝します ：）

4

1 に答える 1

0

コンテナは、このセクションを変更する画面の後ろの正方形のようです

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

}

に

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

}

次に、変換を 200px に変更します。動作するようです。ここを参照

于 2012-11-26T11:16:10.957 に答える