title: How to rotate an image by a random amount using CSS?
body: <p>I have a gallery of 20 images on my web page that I would like to rotate by a random amount (-5 to 5 degrees) upon hover over each image. If possible, I'd like to use just CSS. If not, I would be open to using JavaScript or jQuery. </p>
  
  <p>My CSS is as follows:</p>
  
  <pre><code>.photo:hover {
      z-index:1;
      transform:rotate(6deg) scale(1.25);
      -webkit-transform:rotate(6deg) scale(1.25);
      -moz-transform:rotate(6deg) scale(1.25);
      -ms-transform:rotate(6deg) scale(1.25);
  }
  </code></pre>
  
  <p>6deg should be a random number, so every time the user hovers over an image, it rotates by a random amount between -5 and 5. Can I call a JavaScript function from within the CSS, or even a JavaScript variable? That would be better than creating 20 different CSS ids. </p>
  
  <p>How can I accomplish this? Thanks!</p>