Question

我的网页上有一个包含20张图片的图库，我希望将鼠标悬停在每张图片上时随机旋转（-5到5度）。如果可能的话，我只想使用CSS。如果没有，我会愿意使用JavaScript或jQuery。

我的CSS如下：

.photo:hover {
    z-index:1;
    transform:rotate(6deg) scale(1.25);
    -webkit-transform:rotate(6deg) scale(1.25);
    -moz-transform:rotate(6deg) scale(1.25);
    -ms-transform:rotate(6deg) scale(1.25);
}

6deg应该是一个随机数，因此每次用户将鼠标悬停在图像上时，它会在-5到5之间随机旋转。我可以在CSS中调用JavaScript函数，甚至是JavaScript变量吗？这比创建20个不同的CSS ID更好。

我怎样才能做到这一点？谢谢！

Answer 1

您不需要单独的CSS ID，但您可以在类上使用一些jQuery。这里直接使用.each()代替.css()，因为否则随机角度将生成一次并用于所有图像。要在悬停时单独旋转：

$('.photo').hover(function() {
    var a = Math.random() * 10 - 5;
    $(this).css('transform', 'rotate(' + a + 'deg) scale(1.25)');
}, function() {
    $(this).css('transform', 'none');
});

如果您想要平滑地设置这些转换动画，只需在该类中添加transform CSS属性：

.photo {
    transition: transform 0.25s linear;
}

示范：http://jsbin.com/iqoreg/1/edit

如何使用CSS随机旋转图像？

1 个答案: