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" />