CSS를 사용하여 임의의 양으로 이미지를 회전하는 방법은 무엇입니까?

Question

각 웹 페이지 위에 마우스를 올리면 임의의 양 (-5 ~ 5도)만큼 회전하려는 웹 페이지에 20 개의 이미지 갤러리가 있습니다. 가능한 경우 CSS 만 사용하고 싶습니다. 그렇지 않은 경우 JavaScript 또는 jQuery를 사용할 수 있습니다.

.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입니다 CSS 내의 JavaScript 함수 또는 JavaScript 변수? 그러면 20 개의 CSS ID를 만드는 것보다 낫습니다.

어떻게하면됩니까? 감사!

Answer 1

별도의 CSS ID가 필요하지 않지만 클래스에서 일부 jQuery를 사용할 수 있습니다. .css() 대신 .each()이 직접 사용됩니다. 그렇지 않으면 임의의 각도가 한 번 생성되어 모든 이미지에 사용되기 때문입니다. 호버에 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