title: implementing flipcard on click instead of on hover
body: <p>I have implemented a css flipcard effect, which works on hover using css. See css code below. However I want to implement the flipcard effect on click by using jQuery. I have tried everything but cannot figure it out.</p>
  
  <p>Here is the javascript that I thought would work.</p>
  
  <pre><code>$('.flip-container .flipper').click(function(){
      $(this).css('transform, rotateY(180deg)');
  });
  </code></pre>
  
  <p>Please see below for code that works with hover.</p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;div class="flip-container"&gt;
    &lt;div class="flipper"&gt;
      &lt;div class="front artist-1"&gt;
        &lt;!-- front content --&gt;
      &lt;/div&gt;
      &lt;div class="back"&gt;
        &lt;p&gt;You won&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>css</strong></p>
  
  <pre><code>/* flip the pane when hovered */
  .flip-container:hover .flipper, .flip-container.hover .flipper {
    transform: rotateY(180deg);
  }
  
  .flip-container, .front, .back {
    width: 250px;
    height: 250px;
  }
  
  /* flip speed */
  .flipper {
    transition: 0.8s;
    transform-style: preserve-3d;
    position: relative;
  }
  
  /* hide back of pane during swap */
  .front, .back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  /* front pane, placed above back */
  .front {
    z-index: 2;
    transform: rotateY(0deg);
  }
  
  /* back, initially hidden pane */
  .back {
    transform: rotateY(180deg);
    background-color: #fff;
  }
  
  
  .artist-1 {
    background: url(http://img.bleacherreport.net/img/images/photos/003/556/940/edab30087cea36c0ca206fc61a4b10fa_crop_north.jpg?w=630&amp;h=420&amp;q=75) center center no-repeat;
    background-size: cover; 
  }
  </code></pre>