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

我在我的网页上有一个包含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更好.

我怎么能做到这一点？谢谢！

解决方法

您不需要单独的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');
});

如果要平滑地设置这些转换的动画,只需向类中添加转换CSS属性即可：

.photo {
    transition: transform 0.25s linear;
}

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