title: How do I change this flipping card to rotate itself onclick?
body: <p>I want to make flipping flashcard verticaly, problem is that property of changing front card to back card works on hover. I don't have any idea how to do it to change front card to back card just by clicking. Any ideas? </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;&lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Flipping Animation with CSS&lt;/title&gt;&lt;link href='http://fonts.googleapis.com/css? family=Kelly+Slab|Oleo+Script+Swash+Caps:400,700|Amaranth:400,700,400italic,700italic' rel='stylesheet' type='text/css'&gt;
  &lt;link rel="stylesheet" href="main.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="page"&gt;
  
          &lt;div class="vertical-flip-container flip-container floatR" ontouchstart="this.classList.toggle('hover');"&gt;
              &lt;div class="flipper"&gt;
                  &lt;div class="front"&gt;
                      The front face
                  &lt;/div&gt;
                  &lt;div class="back"&gt;
                      The back face
                  &lt;/div&gt;
                  &lt;div class="clear"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>css</p>
  
  <pre><code>body {
      line-height: 1;
      font-family: 'Kelly Slab', cursive;
      font-weight: 400;
  }
  ol, ul {
      list-style: none;
  }
  blockquote, q {
      quotes: none;
  }
  blockquote:before, blockquote:after,
  q:before, q:after {
      content: '';
      content: none;
  }
  table {
      border-collapse: collapse;
      border-spacing: 0;
  }
  
  h1, h2, h3, h4, h5, h6 { color: #3498db; margin: 10px 0; font-family: 'Amaranth', sans-serif; font-weight: 400; }
  h2 { font-size: 2.5em; }
  h3 { font-size: 1.4em }
  .floatL { float: left; }
  .floatR { float: right; }
  .clear { clear: both;; line-height: 0; font-size: 0; display: block; }
  p { line-height: 18px; color: #333; margin: 5px 0; font-size: 1em; }
  a { text-decoration: none; color: #038823;}
  a:hover { text-decoration: underline; color: #ee1821; }
  .alignCenter { text-align: center; }
  
  /**** App specific styles ***/
  h1 { text-align: center; font-size: 1.5em; margin-bottom: 20px; }
  #page { max-width: 960px; margin: 20px auto; }
  #content { padding: 10px; background: #f4f4f4; }
  
  .flip-container { -webkit-perspective:1000; width: 400px; }
  .flipper { transition: 0.6s; -webkit-transform-style: preserve-3d; position: relative; height: 400px; }
  .front, .back { width: 400px; height: 400px; position: absolute; left: 0; top: 0; -webkit-backface-visibility: hidden; color: #fff; text-shadow: 1px 1px #000; font-size: 2em; line-height: 400px; text-align: center; }
  .back { -webkit-transform: rotateY(180deg); background: #3498db; }
  .front { z-index: 2; background: #2ecc71; }
  .flip-container:hover .flipper, .flip-container.hover .flipper { -webkit-transform: rotateY(180deg); }
  .flip-container p { margin: 10px 0; text-align: center; }
  
  .vertical-flip-container .back { -webkit-transform: rotateX(180deg); }
  .vertical-flip-container:hover .flipper, .vertical-flip-container.hover .flipper { -webkit-transform: rotateX(-180deg); }
  .vertical-flip-container .flipper { -webkit-transform-origin: 100% 213.5px; /* half of height */ }
  </code></pre>