これらの回転キューブを並べて表示することはできません

Question

回転キューブにコードhereを見つけました。正面に写真を、もう片面に文字を表示するために使用したかったのです。

<div class='box-scene'> 
    <div class='box'> 
     <div class='front face'> 
      <img src='http://placehold.it/180x180/' alt=''> 
     </div> 
     <div class="side face"> 
      <p>This is back</p> 
     </div> 
    </div> 
</div> 
<div class='box-scene'> 
    <div class='box'> 
     <div class='front face'> 
      <img src='http://placehold.it/180x180/' alt=''> 
     </div> 
     <div class="side face"> 
      <p>This is back</p> 
     </div> 
    </div> 
</div> 

.box-scene { 
    -webkit-perspective: 700; 
    width: 400px; 
    height: 200px; 
    margin: auto; 

    z-index: 999; 
} 
.box-scene:hover .box { 
    -webkit-transform: rotateY(-90deg); 
} 
.box { 
    width: 180px; 
    height: 180px; 
    position: relative; 

    -webkit-transform-style: preserve-3d; 

    -webkit-transition: all 0.4s ease-out; 
    -webkit-transform-origin: 90px 90px -90px; 

    /* float: left; */ 
    margin: 30px auto; 


} 

.face { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    -webkit-backface-visibility: visible; 

    -webkit-transform-origin: 0 0; 
} 
.front { 
    -webkit-transform: rotateY(0deg); 
    z-index: 2; 
    background: #d9d9d9; 
} 
.side { 
    background: #9dcc78; 
    -webkit-transform: rotateY(90deg); 
    z-index: 1; 
    left: 180px; 
} 

私はディスプレイを使用して試してみた：インラインは、ブートストラップを使用して別の列にそれらを入れて試してみましたが、まだこれらの2つのキューブが並んで並ばないであろう。誰も彼らが整列を拒否する理由の詳細をいくつか提供することができますか？

Answer 1

.box-scene css add float：leftと49％の幅を変更します。