title: Bootstrap 4 | Flip card on click()
body: <p>The CSS :active flips my card on mouseDown.  What I need is to replace the mouseDown event with JQuery click() so my card stay flipped, until I click it again. </p>
  
  <p>I tried few options with JQuery, but nothing worked.</p>
  
  <p>Here is the working <strong>CSS</strong>  (on-mousedown)</p>
  
  <pre><code>.flip-card {
    background-color: transparent; 
    perspective: 1000px;  
  }
  
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 8px 10px 0 rgba(90,90,90,0.2)
  }
  
  
  .flip-card:active .flip-card-inner {   
    transform: rotateY(180deg);
  }
  
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }
  
  
  
  .flip-card-back {
  
    transform: rotateY(180deg);
  }
  </code></pre>
  
  <p>And this is the <strong>HTML</strong></p>
  
  <pre><code>&lt;div class="card mb-3  " style="border:0;"  &gt;
  &lt;div class="flip-card mb-3 "&gt;
  
    &lt;div class="flip-card-inner"  &gt;
    &lt;div class="flip-card-front"&gt; 
    &lt;!--Card image--&gt;
    &lt;div class="view overlay"&gt;
      &lt;img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%287%29.jpg" class="img-fluid" alt=""&gt;
      &lt;a href="#"&gt;
        &lt;div class="mask rgba-white-slight"&gt;&lt;/div&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  
    &lt;!--Card content--&gt;
    &lt;div  class="card-body   " style="border:0; " &gt;       
      &lt;!--Title--&gt;
      &lt;h4 class="card-title"&gt;Card title 1&lt;/h4&gt;
      &lt;!--Text--&gt;
      &lt;p class="card-text"&gt;Some quick example text to build on the card title and make up the bulk of the card's
        content.&lt;/p&gt;
      &lt;button class="btn btn-primary" id="btnflip1"  &gt;Front&lt;/button&gt;
    &lt;/div&gt;
  
  
    &lt;/div&gt;
  
  
    &lt;div class="flip-card-back" &gt;
    &lt;!--Card image--&gt;
    &lt;div class="view overlay"&gt;
      &lt;img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%287%29.jpg" class="img-fluid" alt=""&gt;
      &lt;a href="#"&gt;
        &lt;div class="mask rgba-white-slight"&gt;&lt;/div&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  
    &lt;!--Card content--&gt;
    &lt;div  class="card-body   " style="border:0; " &gt;   
      &lt;!--Title--&gt;
      &lt;h4 class="card-title"&gt;Card title 2&lt;/h4&gt;
      &lt;!--Text--&gt;
      &lt;p class="card-text"&gt;This is the back&lt;/p&gt;
      &lt;button class="btn btn-primary" id="btnflip2" &gt;Back&lt;/button&gt;  
    &lt;/div&gt;
  
    &lt;/div&gt;
  
    &lt;/div&gt;  
    &lt;/div&gt;  
  &lt;/div&gt;   
  </code></pre>
  
  <p>I need the card to flip with JQuery on click() event. I cannot use MD, and this lib doesn't work for me: <a href="https://nnattawat.github.io/flip/" rel="nofollow noreferrer">https://nnattawat.github.io/flip/</a>  </p>
  
  <p>Many Thanks</p>