title: Spin a Div using jQuery
body: <p>I want to be able to spin a Div around using jQuery. I have created the effect with pure CSS -  see here</p>
  
  <p><a href="http://jsfiddle.net/9twvF/" rel="nofollow">http://jsfiddle.net/9twvF/</a></p>
  
  <pre><code>&lt;div class="clientcontainer"&gt;
      &lt;div class="clientcard hl"&gt;
          &lt;div class="front face"&gt;Front Panel&lt;/div&gt;
          &lt;div class="back face center"&gt;Back Panel&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  .clientcontainer {
      position: relative;
      display: inline-block;
      width: 240px;
      height: 240px;
  }
  
  
  .clientcontainer {
      -webkit-perspective: 1000px;
      -moz-perspective: 1000px;
      -o-perspective: 1000px;
      -ms-perspective: 1000px;
      perspective: 1000px;
  }
  
  .clientcard {
      width: 100%;
      height: 100%;
      -webkit-transform-style: preserve-3d;
      -webkit-transition: all 0.5s linear;
      -moz-transform-style: preserve-3d;
      -moz-transition: all 0.5s linear;
      -o-transform-style: preserve-3d;
      -o-transition: all 0.5s linear;
      transform-style: preserve-3d;
      transition: all 0.5s linear;
      -ms-transform-style: preserve-3d;
      -ms-transition: all 0.5s linear;
  }
  
  .clientcontainer:hover .hl, .clientcontainer.hover_effect .hl {
      -webkit-transform: rotateY(-180deg);
      -moz-transform: rotateY(-180deg);
      -o-transform: rotateY(-180deg);
      -ms-transform: rotateY(-180deg);
      transform: rotateY(-180deg);
  }
  
  .face {
      position: absolute;
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -o-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
      backface-visibility: hidden;
      background-color: yellow;
      font-weight: bold;
  }
  
  .face.back {
      display: block;
      -webkit-transform: rotateY(180deg);
      -webkit-box-sizing: border-box;
      -moz-transform: rotateY(180deg);
      -moz-box-sizing: border-box;
      -o-transform: rotateY(180deg);
      -o-box-sizing: border-box;
      -ms-transform: rotateY(180deg);
      -ms-box-sizing: border-box;
      transform: rotateY(180deg);
      box-sizing: border-box;
      text-align: center;
      background-color: green;
      border: 1px solid #666;
  }
  </code></pre>
  
  <p>But instead of using CSS and it working on hover over. I want jQuery to be able to animate the div with the same effect but it do it say on the click of a button.</p>
  
  <p>Any ideas?</p>
  
  <p>Thanks!</p>