如何在不同的方向上旋轉兩張不同的圖像？

Question

我試圖無休止地沿不同的方向旋轉兩個齒輪圖像 - 一個順時針旋轉，另一個逆時針旋轉。我發現下面的css3，但它只是在相同的方向上動畫他們。什麼是完成這個最好的方法？它甚至通過css3或可能與查詢？ （以跨瀏覽器的兼容性考慮）

#image { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 120px; 
    height: 120px; 
margin:-60px 0 0 -60px; 
-webkit-animation:spin 4s linear infinite; 
-moz-animation:spin 4s linear infinite; 
animation:spin 4s linear infinite; 
} 
#image2 { 
     position: absolute; 
     top: 50%; 
     left: 50%; 
     width: 120px; 
     height: 120px; 
    margin:-60px 0 0 -60px; 
    -webkit-animation:spin 4s linear infinite; 
    -moz-animation:spin 4s linear infinite; 
    animation:spin 4s linear infinite; 
    } 


@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } 
    @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } 
    @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); 

Answer 1

需要另外，說叫antispin，與-360deg（減）的設置：

@-moz-keyframes antispin { 100% { -moz-transform: rotate(-360deg); } }