Блог

Мне нужно, чтобы переходы, поворачивающие img по щелчку, были на 90 градусов, а после повторного нажатия кнопки изображение поворачивается на 0 градусов. У меня есть веб-сайт, на котором они есть с помощью jQuery, но мне это нужно только с помощью css.

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