如何通过使用CSS随机量旋转图像？(How to rotate an image by a rand

我有我的网页上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.我可以调用JavaScript函数从CSS中，甚至是JavaScript变量？ 这将是比创建20级不同的CSS的IDS更好。

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

Answer 1:

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

$('.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

文章来源: How to rotate an image by a random amount using CSS?