title: Flip content of a div on clicking a button
body: <p>I am learning this 3D effect of flipping content of a div. On hover the div code below works perfectly. But What I want is that, if someone only click on the button flip this flipping of div should work. I want this flipping effect only if button is clicked not if hover or anything. </p>
  
  <pre><code>    &lt;style&gt;
      #f1_container {
        position: relative;
        margin: 10px auto;
        width: 450px;
        height: 281px;
        z-index: 1;
      }
      #f1_container {
        perspective: 1000;
      }
      #f1_card {
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        transition: all 1.0s linear;
      }
      #f1_container:hover #f1_card {
        transform: rotateX(180deg);
        box-shadow: -5px 5px 5px #aaa;
      }
      .face {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
      }
      .face.back {
        display: block;
        transform: rotateX(180deg);
        box-sizing: border-box;
        padding: 10px;
        color: white;
        text-align: center;
        background-color: #aaa;
      }
      &lt;/style&gt;
  
      &lt;div id="f1_container"&gt;
      &lt;div id="f1_card" class="shadow"&gt;
        &lt;div class="front face"&gt;
      lets see if anything happen &lt;br /&gt;lets see if anything happen &lt;br /&gt;lets see if anything happen &lt;br /&gt;lets see if anything happen &lt;br /&gt;
      lets see if anything happen &lt;br /&gt;lets see if anything happen &lt;br /&gt;lets see if anything happen &lt;br /&gt;lets see if anything happen &lt;br /&gt;
      lets see if anything happen &lt;br /&gt;lets see if anything happen &lt;br /&gt;lets see if anything happen &lt;br /&gt;lets see if anything happen &lt;br /&gt;
        &lt;/div&gt;
        &lt;div class="back face center"&gt;
          &lt;p&gt;This is nice for exposing more information about an image.&lt;/p&gt;
          &lt;p&gt;Any content can go here.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  &lt;button class="btn btn-primary" id="flip_content"&gt;Flip&lt;/button&gt;
  </code></pre>