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