尝试将多个 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 规则你可以覆盖它。

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

Trying to tilt multiple divs to different, random angles

css

random

wordpress

jquery

tilt