CSS Transitions Rotating img


I need to Transitions Rotating img by click to be 90 degree and after click the button again the img rotate to get to 0 degree . I have web site that have these by jQuery but i need it by css only .

Problem courtesy of: user965330


The transform:rotate() CSS property has to be used. I've written a (simple?) pure JS function for this purpose.


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

Example, Fiddle: http://jsfiddle.net/zvuyc/:

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


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.