마우스 오버시 150ms 간격으로 반 시계 방향으로 180˚ 회전 한 다음 마우스를 놓을 때 요소를 반 시계 방향으로 원래의 0˚로 150ms 이상 회전해야합니다.호버 한 상태에서 요소를 180도 이상 180 도로 회전하려면 어떻게해야합니까?
CSS3, jQuery 및 JavaScript를 사용하고 있습니다.
Chrome을 사용하지만 Firefox와 Safari에서도 작동해야합니다. IE에 대해 너무 걱정하지 않아.
마우스 오버시 150ms 간격으로 반 시계 방향으로 180˚ 회전 한 다음 마우스를 놓을 때 요소를 반 시계 방향으로 원래의 0˚로 150ms 이상 회전해야합니다.호버 한 상태에서 요소를 180도 이상 180 도로 회전하려면 어떻게해야합니까?
CSS3, jQuery 및 JavaScript를 사용하고 있습니다.
Chrome을 사용하지만 Firefox와 Safari에서도 작동해야합니다. IE에 대해 너무 걱정하지 않아.
클래스를 추가/제거하려면 CSS3 transform
, transition
및 자바 스크립트를 사용하십시오.
데모 : http://jsfiddle.net/ThinkingStiff/AEeWm/
HTML :
<div id="rotate">hover me</div>
CSS :
#rotate {
border: 1px solid black;
height: 100px;
width: 100px;
}
.over {
transform: rotate(-180deg);
transition: transform 150ms ease;
}
.out {
transform: rotate(-360deg);
transition: transform 150ms ease;
}
스크립트 :
var rotate = document.getElementById('rotate');
rotate.addEventListener('mouseover', function() {
this.className = 'over';
}, false);
rotate.addEventListener('mouseout', function() {
var rotate = this;
rotate.className = 'out';
window.setTimeout(function() { rotate.className = '' }, 150);
}, false);
일부 브라우저에는 여전히 브라우저 접두사 (-o, -moz, -ms 및 -webkit)가 필요할 수 있음을 잊지 마십시오. – qsheets
좋아 보이지만 마우스를 꽂거나 마우스를 놓을 때 같은 방향 (반 시계 방향)으로 회전해야합니다. . – chharvey
@ TestSubject528491 질문을 먼저 읽으면 도움이 될 것 같습니다. 이것을 처리하기위한 코드가 업데이트되었습니다. 자바 스크립트가 필요합니다. – ThinkingStiff
왜 150ms의? 단지 브라우저 시간으로 작업 할 때 정확한 표시를하지는 않을 것이지만'setTimeout (functionCall(), 150) '을 사용하면 필요할 것입니다. – vol7ron
어떤 유형의 요소입니까? 이미지 만? –
CSS3는 실험적 * [변형 속성] (https://developer.mozilla.org/en/CSS/transform)과 [전환 속성] (https : //developer.mozilla.)을 사용하려는 경우에만 발생합니다. org/ko/CSS/transition), 때로는 Firefox에서 약간 느릴 수 있습니다. – animuson