複数のdivを異なるランダムな角度に傾けようとしています

Question

私はhereとは反対のことを達成しようとしています。

私はワードプレスのページに一連のdivを持っていますが、私はページ上にランダムに少しずつ傾けて表示したいと思います。

ユーザーは、ユーザーがそれらの上を移動するときにまっすぐにすべきです。

は、ここで私が持っているものです：最初に

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

は、私が.each部分をスキップしますが、これは、すべてのdivが同じように傾いたが生じました。しかし、.eachであっても、同じように傾いてしまいます。ホバー効果として

は、私は、CSSのページでそれを設定している：

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

、それはこのすべてが（もちろん、すべてのdivが同じように傾いた）CSSで行われたときに働いていました。今はもう動作しませんので、jQueryでホバー効果を追加する必要がありますか？

Answer 1

要素が同じ量だけ傾いているのは、要素を反復する前に度を計算しているからです。 jQueryのルールを適用するので、あなたのCSSのために働いていない理由がある

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

：彼らに!importantオプションを追加することホバー効果試し用として

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

：代わりに、要素ごとに1つの角度を計算する必要がありますインラインスタイルとして要素上に配置します。これらは、どのCSSセレクタよりも高い優先度です。 !importantルールを使用すると、それを無効にすることができます。