CSS轉換旋轉img

Question

我需要轉換點擊旋轉img 90度，再次單擊按鈕後，img旋轉到0度。我有web site有jQuery的這些，但我只需要通過css。

Answer 1

必須使用transform:rotate() CSS屬性。我爲此寫了一個（簡單的？）純JS函數。

JS：

function rotate(elem, angle){ 
    //Cross-browser: 
    var css = ["-moz-","-webkit-","-ms-","-o-","",""] 
       .join("transform:rotate(" + angle + "deg);") 
    elem.style.cssText += css; 
} 

例，小提琴：http://jsfiddle.net/zvuyc/：

<script> 
window.onload = function(){ 
    var angle = 0; 
    document.getElementById("button").onclick = function(){ 
     angle += 90 % 360; 
     rotate(document.getElementById("image"), angle); 
    } 
} 
</script> 
<input type="button" id="button" value="Rotate by 90deg"> 
<img src="http://simplyeng.com/wp-content/uploads/2008/11/indiana_tux.png" id="image" />