Làm cách nào để xoay một phần tử đến 180 độ trên 150 mili giây khi di chuột?

Question

Khi di chuột qua, tôi cần phải xoay phần tử ngược chiều kim đồng hồ 180˚ trong khoảng thời gian 150ms và sau đó trên chuột, tôi cần phải xoay phần tử ngược chiều kim đồng hồ trở lại 0˚ ban đầu trên 150 mili giây.

Tôi đang mở để sử dụng CSS3, jQuery và JavaScript.

Tôi sử dụng Chrome, nhưng tôi cũng cần phải làm cho nó hoạt động cho Firefox và Safari. Không quá lo lắng về IE.

Answer 1

Sử dụng CSS3 transform, transition và Javascript để thêm/xóa lớp học.

Demo: 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; 
} 
​ 

Script:

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); 

​