ブートストラップで2つのパネル本体を（おそらくサイズが違う）反転させる方法は？

Question

私は同じpanelの中の2つのpanel-bodyを水平に反転しようとしていました。 2つのpanel-bodyは、互いに重なり合っていなければなりません。また、パネルを通過するたびに180度回転する必要があります。

現在、2つのpanel-bodyがパネル内に順番に配置されています。だから、panel-bodyのうちの1つが隠されていても、そこにはスペースがあります。

これは私のHTML /小枝テンプレートです：

<div class="row" data-checks-url="/checks" id="uptime-checks-panel"> 

    {% for check in checks %} 

    <div class="col-xs-12 col-md-6 col-lg-4" id="{{ 'check_' ~ check.id }}"> 

     <div class="panel text-center flip"> 
      <div class="panel-body panel-front"> 
       <div class="panel-heading"> 
        <h3 class="panel-title"> {{ check.name }}</h3> 
       </div> 

       <i {% if check.status=='up' %} class="fa fa-thumbs-up fa-5x thumbs-up" {% else %} class="fa fa-thumbs-down fa-5x thumbs-down" {% endif %} id="{{ check.id ~ '_status'}}"> 
        </i> 

       <div class="panel-footer"> 
        <a href="{{ check.hostname | external_link }}"> {{ check.hostname }}</a> 
       </div> 
      </div> 

      <div class="panel-body panel-back"> 
       <ul class="list-group"> 
        <li class="list-group-item">last response in {{ check.lastresponsetime }} millisecs </li> 
        <li class="list-group-item">last error {{ check.lasterrortime | pretty_timestamp }} ago</li> 
       </ul> 
      </div> 

     </div> 

    </div> 

    {% endfor %} 

</div> 

、これは私は現在、2つの物体の反転について使用していCSSです：私は両方にposition: absoluteを追加する場合

.flip { 
    background-color: red; 
    border: 1px solid black; 
} 

.flip > .panel-front { 
    transform: perspective(800px) rotateY(0deg); 
    backface-visibility: hidden; 
    transition: transform .5s linear 0s; 
} 

.flip > .panel-back { 
    transform: perspective(800px) rotateY(180deg); 
    backface-visibility: hidden; 
    transition: transform .5s linear 0s; 
} 

.flip:hover > .panel-front { 
    transform: perspective(800px) rotateY(-180deg); 
} 

.flip:hover > .panel-back { 
    transform: perspective(800px) rotateY(0deg); 
} 

.panel-frontと.panel-back結果がさらに悪くなります。つまり、すべてのグリッドが応答しなくなります...もちろん、私は応答グリッドが必要なので、panelにサイズを設定したくありません。

これは視覚的な結果である：パネルの上に行く前に

• ：

• パネルの上に行く後：

の

注意：

1. 遷移が（私は上記述べたように）二つの物体が互いに上下ないことを除いて、うまく働きます。

2. 二人の遺体は、異なるサイズの

3. 可能性があり、私は私が達成したい何

4. 応答グリッドを必要とするので、私は、パネルのサイズを設定する必要はありません基本的に同じですthis exampleの左上一番上の四角形としての効果。

Answer 1

私はセレクタ.flipと.flip > .panel-backを変更することによって（少なくとも今、二つの物体が互いに上下になるように思われる）問題を修正：

.flip { 
    position: relative; 
} 

.flip > .panel-back { 
    position: absolute; 
    top: 0; 
    min-width: 100%; 
    min-height: 100%; 

    background-color: green; 
    transform: perspective(800px) rotateY(180deg); 
    backface-visibility: hidden; 
    transition: transform .5s linear 0s; 
}