CSS переходы вращающиеся img

Question

Мне нужно переходить, вращая img, щелкнув на 90 градусов, и после повторного нажатия на кнопку img повернуть, чтобы достичь 0 градусов.У меня есть веб-сайт , который есть у 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;
}

Пример, Fiddle: 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" />