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

我在我的网页上有20张图片，我想通过将鼠标悬停在每张图片上来随机旋转（-5到5度）。如果可能的话，我只想使用CSS。如果没有，我会开放使用JavaScript或jQuery。如何使用CSS以随机数量旋转图像？

我的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中的JavaScript函数，甚至是JavaScript变量？这比创建20个不同的CSS ID更好。

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

来源

2012-11-22 Joey

不能包括JavaScript中的CSS。只需使用jQuery来改变悬停的程度。 – nhahtdh

你不需要单独的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

来源

2012-11-22 01:44:41

谢谢，这是完美的！我喜欢这样做，即使在同一个元素上徘徊时，甚至会给你一个不同的旋转度。 –

等待 - 你没有使用每一个，对：D？ – Adam

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

回答

相关问题