title: Logic to Flip Image in jquery
body: <p>Anyone please explain the logic which I should use to flip image in image slider. Basically I am making a image slider, on click on any image, it should flip and behind I want to display description of that image.</p>
  
  <p>I have tried examples. They are working perfectly with single image,but when I am trying in my example its not working. I know how sliding works, just explain logic to Flip image.</p>
  
  <p>Just give me logic I will try write the code.</p>
  
  <p>Thanks in Advance,</p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;HTML&lt;/title&gt;
      &lt;link rel="stylesheet" href="main.css" type="text/css" /&gt;
      &lt;script src="jquery.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="main.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="f1_container"&gt;
          &lt;div id="f1_card" class="shadow"&gt;
              &lt;div class="front face"&gt;
                  &lt;img src="http://media-cdn.tripadvisor.com/media/photo-s/03/48/0b/14/dolphin-view-chalets.jpg" style="height: 281px; width: 450px;" /&gt;
              &lt;/div&gt;
              &lt;div class="back face center"&gt;
                  Some text inside here
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <h2>CSS</h2>
  
  <pre><code>#f1_container {
  position: relative;
  margin: 10px auto;
  width: 450px;
  height: 281px;
      z-index : 1;
  }
  #f1_container {
      -webkit-perspective: 1000;
      perspective: 1000;
  }
  #f1_card {
      width: 100%;
      height: 100%;
      -webkit-transform-style: preserve-3d;
      -webkit-transition: all 1.0s linear;
      transform-style: preserve-3d;
      transition: all 1.0s linear;
  }
  #f1_container:hover #f1_card {
      -webkit-transform: rotateY(180deg);
      transform: rotateY(180deg);
      box-shadow: -5px 5px 5px #aaa;
  }
  .face {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
  }
  .face.back {
      display: block;
      -webkit-transform: rotateY(180deg);
      transform: rotateY(180deg);
      box-sizing: border-box;
      color: white;
      text-align: center;
      background-color: #aaa;
  }
  </code></pre>