title: How can I achieve a slot machine spinning effect with CSS3 & jQuery?
body: <p>I am creating a demo application that randomly selects a venue when a button is clicked. Once the button is clicked I want to have the venues scroll through with a slot machine spinning animation using CSS3 and jQuery before a venue is selected. </p>
  
  <p>I thought about using <code>-webkit-keyframes</code> and changing the background position, but it's not the ideal animation I would like. </p>
  
  <pre><code>@-webkit-keyframes spin{  
    0% {  
          background-position: 0, 0 0;
          -webkit-transform: rotateX(0deg);
       }
    100% { 
          background-position: 0, 0 -640px;
          -webkit-transform: rotateX(360deg);
       }
  }
  
  .rotating{
      -webkit-animation: spin .5s infinite linear;
      -webkit-transition: background-position .7s;
  }
  </code></pre>
  
  <p>Can anyone give any insight on how this can be achieved? <a href="http://jsfiddle.net/Uryay/6/">Here</a> is what I have so far. Any help is appreciated. </p>
  
  <p>Thank You</p>