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

我认为下面的代码对你有帮助
fiddle :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(); 
});