title: Cards animation Jquery and CSS
body: <p>I would turn front and back of a card with this code, but after one click I see the back card and after second click I don't see any card! What is the problem?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(".carta img").click(function() {
    $(this).toggleClass("flipped");
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.contenitorecarta {
    position: relative;
    width: 100px;
    height: 150px;
    perspective: 800px;
  }
  .carta {
    width: 100px;
    height: 150px;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 1s;
  }
  .carta img {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }
  .carta.back {
    transform: rotateY(180deg)
  }
  .carta .flipped {
    transform: rotateY(180deg);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="contenitore-carta"&gt;
    &lt;div class="carta"&gt;
      &lt;div class="front"&gt;
        &lt;img width="100" height="150" src="http://placehold.it/100x150/F44/000.png&amp;text=Front"&gt;
      &lt;/div&gt;
      &lt;div class="back"&gt;
        &lt;img width="100" height="150" src="http://placehold.it/100x150/44F/000.png&amp;text=Back"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>