Question

我有一个页面，其中应该有2行，每行包含两个带内容的矩形div（图像，h3和段落）。单击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(); 
});

Javascript用内容翻转div

1 个答案: