Làm cách nào để xoay hình ảnh theo số lượng ngẫu nhiên bằng CSS?

Question

Tôi có một bộ sưu tập 20 hình ảnh trên trang web của mình mà tôi muốn xoay theo một lượng ngẫu nhiên (-5 đến 5 độ) khi di chuột qua từng hình ảnh. Nếu có thể, tôi chỉ muốn sử dụng CSS. Nếu không, tôi sẽ mở để sử dụng JavaScript hoặc jQuery.

CSS của tôi là như sau:

.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 phải là một số ngẫu nhiên, vì vậy mỗi khi người dùng di chuột qua một hình ảnh, nó sẽ quay bởi một lượng ngẫu nhiên giữa -5 và 5. Tôi có thể gọi một Hàm JavaScript từ bên trong CSS, hoặc thậm chí là một biến JavaScript? Điều đó sẽ tốt hơn việc tạo ra 20 id CSS khác nhau.

Tôi làm cách nào để thực hiện việc này? Cảm ơn!

Answer 1

Bạn sẽ không cần các ID CSS riêng biệt, nhưng bạn có thể sử dụng một số jQuery trên lớp. .each() được sử dụng thay vì .css() trực tiếp tại đây vì nếu không, góc ngẫu nhiên sẽ được tạo một lần và được sử dụng cho tất cả các hình ảnh. Để xoay individally trên di chuột:

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

Nếu bạn muốn trơn tru động những biến đổi, bạn có thể chỉ cần thêm một tài sản transform CSS vào trong lớp:

.photo { 
    transition: transform 0.25s linear; 
} 

diễn: http://jsbin.com/iqoreg/1/edit