title: Flip a div 180 degrees using css and javascript
body: <p>I want to flip a div 180 degrees using a javascript function which triggers a css animation. My div has got the following declaration:</p>
  
  <pre><code>.start-photo-thumb
  {
      position: relative;
      float: left;
      background: #444444;
      height: 192px;
      width: 192px;
      margin-right: 10px;
      margin-bottom: 10px;
      perspective: 1000px;
      animation: rotating 0.6s linear infinite;
      animation-play-state: paused;
  }
  
  @keyframes rotating 
  {
      from
      {
          transform: rotateY(0deg);
      }
      to
      {
          transform: rotateY(180deg);
      }
  }
  </code></pre>
  
  <p>I think I'm taking the wrong way with my attempt. </p>
  
  <pre><code>function flipPhoto(box)
  {
      $('#' + box.id).css('animation-play-state', 'running');
  
      setTimeout(function(){
          $('#' + box.id).css('animation-play-state', 'paused');
      }, 600);
  }
  </code></pre>
  
  <p>In addition I want to change the background-image at the moment you can't see the div (at 90 degrees or at 300ms).</p>
  
  <p>Is there a better and easier way to solve that problem? Thanks in advance!</p>