Wie macht man 2 Panel Körper (mit möglicherweise verschiedenen Größen) Flip Bootstrap?

Question

Ich habe versucht, zwei panel-body s innerhalb derselben panel horizontal zu spiegeln. Die beiden panel-body sollten übereinander liegen, und wenn ich über das Panel gehe, sollten sie sich um 180 Grad drehen.

Momentan ist es so, dass die beiden panel-body's nacheinander in das Panel gesteckt werden; Also, auch wenn einer der panel-body s ausgeblendet ist, ist Platz da.

Das ist mein HTML/Zweig Vorlage:

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

und das ist die CSS ich zur Zeit in Bezug auf die Umklappen der beiden Körper mit:

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

wenn ich position: absolute sowohl hinzufügen .panel-front und .panel-back das Ergebnis ist noch schlechter, dh das ganze Netz reagiert nicht mehr ... Natürlich will ich keine panel Größe einstellen, da ich ein reaktives Grid brauche.

Dies ist das visuelle Ergebnis:

• Bevor über die Platte gehen:

• Nach über die Platte gehen:

Hinweise:

1. der Übergang funktioniert gut, außer dass die beiden Körper nicht übereinander (wie oben schon gesagt).

2. die beiden Körper in verschiedenen Größen

3. Ich will nicht eine Größe an die Platte setzen, weil ich ein ansprechendes Gitter

   brauchen könnten

4. Was ich im Grunde erreichen wollen ist die gleiche Effekt als das linke und oberste Quadrat in this example.

Answer 1

I befestigt, das Problem (zumindest jetzt die beiden Körper erscheinen übereinander sein) durch die Selektoren modifizierende .flip und .flip > .panel-back zu:

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