试图将多个div倾斜到不同的随机角度

Question

我试图实现与here所描述的相反。

我在一个wordpress页面中有一系列的div，我希望在页面上显示每个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);} 

和它的工作时，所有这一切都在CSS做（当然然后所有div倾斜，以同样的方式）。现在它不再工作了，所以我想我应该在jQuery中添加悬停效果？

Answer 1

他们都倾斜相同数量的原因是因为您在迭代元素之前计算度数。相反，你应该计算每个元素的一个角度：

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

至于悬停效果尝试添加!important选项对他们说：

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

原因你的CSS没有工作是因为jQuery应用规则作为内嵌式样的元素。这些优先级高于任何CSS选择器。使用!important规则可以覆盖该规则。