クリックするたびに画像を回転する

Question

クリックするたびに画像を回転させたい...これを行うための関数を作成しましたが、画像をクリックするのは初めてです。さらに、イメージが回転すると自動的に幅と高さが変更されます。毎回同じ幅と高さを維持するにはどうすればいいですか？

これは、関数である：

$(document).ready(function() { 
    $("img").click(function() { 
     $(this).rotate(45)  
    }) 
}) 

Answer 1

を動作する可能性があり、作業の例では、 `.rotate（）`から来るんこの

<div id="imgWrapper"> 
    <img src="Desert.jpg" id="image" onclick="rotateBy10Deg(this)"> 
</div> 

<script> 
    var delta =0; 
    function rotateBy10Deg(ele){ 
     ele.style.webkitTransform="rotate("+delta+"deg)"; 
     delta+=10; 
    } 
</script> 

Answer 2

プラグインは、それは、クリックが二度目のために働いていない理由です、canvasにimgを変換します。あなたが示唆したように、私はそれをしなかったあなたのjQueryを変更するか、このdemo

$(document).ready(function() { 
    $("img").click(function() { 
    $(this).rotate(45); 
    }); 
    $('body').on('click', 'canvas', function() { 
    $(this).rotate(45); 
    }); 
}); 

Answer 3

を参照してください、私はjQueryのではCSSを使用：

CSS：

.rotate:active { 
transform: rotate(180deg) 
} 

をjQueryの：

$(document).ready(function() { 
     $("img").click(function() { 
//forcing img to rotate every time on click() 
      if ($(this).css("transform")=='none') { 
       $(this).css("transform", "rotate(180deg)"); 
      } 
      else { 
       $(this).css("transform","") 
      } 
     }) 
    }) 

Answer 4

I CSSファイルにmax-heightとmax-widthと設定することをおすすめします。これにより、画像が一定のサイズを超えないようになります。

Answer 5

このリンクはあなたを助けるかもしれない：

あなたがクリックしたくない場合は、そのリンクからまっすぐ撮影

Rotate image with onclick

：

Javascipt

は

var rotate_factor = 0; 

function rotateMe(e) { 
    rotate_factor += 1; 
    var rotate_angle = (180 * rotate_factor) % 360; 
    $(e).rotate({angle:rotate_angle}); 
} 

HTML

<img src='blue_down_arrow.png' onclick='rotateMe(this);' /></a> 

Answer 6

角度（45度）は、初期角度0を基準にして計算されたと思います。画像が45度になると、角度が変わると回転するだけです（90など）。そこで、以下のコードはこれだけで簡単にJavaScriptを使用して行うことができます

$(document).ready(function() { 
var angle = 0; 
$("img").click(function() { 
     angle = angle+45; 
    $(this).rotate(angle); 
}) 
})