Trying to tilt multiple divs to different, random angles

I'm trying to achieve the opposite of what is described here.

I have a series of divs in a wordpress page, which I would like to appear on the page as each randomly tilted to a different slight degree.

They should also be straightened up as the user hovers on them.

Here's what I have:

    (function($) {
    $( document ).ready(function() {
        var a = Math.random() * 10 - 5;
        $('.format-aside').each(function( index ) { 
            $(this).css('transform', 'rotate(' + a + 'deg)');})
        });
})(jQuery);

at first, I skipped the .each part, but this resulted in all the divs being tilted the same way. However even with the .each they still end up tilted the same way.

As to the hover effect, I have set it in the CSS page:

.format-aside:hover{-ms-transform: rotate(0deg); 
-webkit-transform: rotate(0deg); 
transform: rotate(0deg);}

and it worked when all of this was done in CSS (but of course then all divs tilted the same way). Now it doesn't work anymore so I figure I should add the hover effect in jQuery?