title: Bootstrap flip card with css3 transform
body: <p>I want to create a bootstrap flip card by using CSS3 transform.
  I did started from this <a href="http://www.bootply.com/PsZubuTsdd#" rel="nofollow">working and basic example</a></p>
  
  <p>However I wanted to modify it to have a fixed height card and some minor enhancement. In particular I needed to have the card flip when the user click on an icon I have created on the top right corner. </p>
  
  <p>I have modified the code as you can see <a href="http://www.bootply.com/ZR7SxjBgMB" rel="nofollow">here</a>.</p>
  
  <p>The problem is that the card does not flip back to front after having flipped correctly to the back side. </p>
  
  <p>Can anybody suggest any solution?</p>
  
  <p><strong>NOTE:</strong>
  the problem seems to be with the jquery code. Actually I have </p>
  
  <pre><code>$('div.flipControl').on('click', function () {
      $(this).closest('div[class="card"]').toggleClass('flipped');
  });
  </code></pre>
  
  <p>But if I change it with </p>
  
  <pre><code>$('div.flipControl').on('click', function () {
      $(this).parent().parent().parent().toggleClass('flipped');
  });
  </code></pre>
  
  <p>Everything works as expected.</p>