Essayer d'incliner plusieurs divs à différents angles aléatoires

Question

J'essaie d'obtenir le contraire de ce qui est décrit here.

J'ai une série de divs dans une page de wordpress, que je voudrais apparaître sur la page comme chacun incliné aléatoirement à un léger degré différent.

Ils doivent également être redressés lorsque l'utilisateur les survole.

Voici ce que j'ai:

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

au début, je sauté la partie .each, mais cela a donné lieu à toutes les divs étant basculés de la même manière. Cependant, même avec le .each, ils finissent toujours par basculer de la même manière.

Quant à l'effet de vol stationnaire, j'ai mis dans la page CSS:

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

et cela a fonctionné quand tout cela a été fait en CSS (mais bien sûr, puis tous les divs basculés de la même manière). Maintenant ça ne marche plus alors je me dis que je devrais ajouter l'effet hover dans jQuery?

Answer 1

La raison pour laquelle ils sont tous inclinés du même montant est parce que vous calculez le degré avant d'itérer sur les éléments. Au lieu de cela, vous devez calculer un angle par élément:

(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); 

Quant à l'essai de l'effet hover y ajoutant l'option !important:

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

La raison de votre CSS ne fonctionne pas parce que jQuery applique les règles sur les éléments comme styles en ligne. Ce sont des priorités plus élevées que tous les sélecteurs CSS. En utilisant la règle !important, vous pouvez remplacer cela.