Javascript翻轉內容的div

Question

我有一個頁面，其中應該有2行，每行包含兩個包含內容（圖像，h3和段落）的矩形div。 單擊div時，它必須翻轉才能顯示其后退內容。

所有工作都由Bootstrap完成，腳本來自https://nnattawat.github.io/flip/ 。

這件事很簡單，但對我來說卻是不可能的：這兩行相互重疊。 我需要的是讓他們呆在不同的行上並保持響應。

這是我的HTML：

 <div class="container grid-container">  

        <div class="row">
            <div class="card-grid col-md-6">
                <div class="front">
                    <img src="images/1.jpg" class="img-responsive"/>
                    <h3>Front text</h3>
                    <p> ---  </p> 
                </div> 
                <div class="back">
                    <h2>Back text</h2>
                </div>  
             </div>       

            <div class="card-grid col-md-6">
                <div class="front">
                    <img src="images/2.jpg" class="img-responsive"/>
                    <h3>Front text</h3>
                    <p> ---  </p> 
                </div> 
                <div class="back">
                    <h2>Back text</h2>
                </div>  
             </div>       

        </div>

        <div class="row">
            <div class="card-grid col-md-6">
                <div class="front">
                    <img src="images/3.jpg" class="img-responsive"/>
                    <h3>Front text</h3>
                    <p> ---  </p> 
                </div> 
                <div class="back">
                    <h2>Back text</h2>
                </div>  
             </div>        

            <div class="card-grid col-md-6">
                <div class="front">
                    <img src="images/4.jpg" class="img-responsive"/>
                    <h3>Front text</h3>
                    <p>  --- </p>  
                </div>
                <div class="back">
                    <h2>Back text</h2>
                </div>   
             </div>     

        </div>

    </div>   

這是我的CSS：

   .card-grid{
      perspective: 500px;
      position:relative;
      transform-style:preserve-3d;
    }

   .grid-container>.row>.card-grid>.front{
     height:100%;
     width:100%;
     backface-visibility: hidden;
     transform-style: preserve-3d;
     position:absolute;
     z-index:1;
     transition:all 0.5s ease-out;
     transform:rotateY(0deg);
    }

   .grid-container>.row>.card-grid>.back{
     transform:rotateY(-180deg);
     height:100%;
     width:100%;
     backface-visibility:hidden;
     transform-style:preserve-3d;
     position:absolute;
     z-index:0;
     transition:all 0.5s ease-out;
  }

關於CSS：我試圖使類.front和.back特定性降低，然后嘗試通過使它們的特定性更強來覆蓋Bootstrap的CSS文件。 沒變。

我的主要JS腳本是這樣的：

  $(function(){
    $(".card-grid").flip({
    trigger:"click"
    });
  });

Answer 1

我認為下面的代碼可以幫助您
小提琴： https : //jsfiddle.net/nadimsajib/bhx8fqvm/
HTML：

<div class="grid">
<div class="row">
   <div id="card" class="card col-lg-3 col-md-3 col-sm-3 col-xs-12">   
    <div class="front"> 
     <img src="http://www.kiplinger.com/quiz/business/T049-S001-test-your-start-up-know-how/images/all-small-businesses-have-to-be-incorporated1.jpg" class="img-responsive"/>
     <h3>Front text</h3>
     <p> -&#45;&#45;  </p>
    </div> 
    <div class="back">
     <h2>Back text</h2>
    </div> 
  </div>
<div style="height:500px;">

</div>
<div class="card col-lg-3 col-md-3 col-sm-3 col-xs-12"> 

    <div class="front"> 
      <img src="http://www.kiplinger.com/quiz/business/T049-S001-test-your-start-up-know-how/images/all-small-businesses-have-to-be-incorporated1.jpg" class="img-responsive"/>
      <h3>Front text</h3>
      <p> -&#45;&#45;  </p>
   </div> 
   <div class="back">
     <h2>Back text</h2>
   </div> 
</div>
</div>
</div>

JS：

$(function($) {
   $(".card").flip(); 
});