Jquery rotate image onclick

Я пытаюсь достичь этого (90-градусное вращение), но он терпит неудачу без ошибок. Это изображение находится в пределах <a></a> TAG, где у него уже есть функция jQuery для переключения.

<?php echo "<img src='down_arrow.png' onclick='$(this).animate({rotate: \"+=90deg\"});' />"; ?>

Ответ 1

Рассмотрим расширение jQuery, например: jQueryRotate

Это сделает поворот внутри onclick намного проще и понятнее.

Ответ 2

В зависимости от того, какие версии браузера вам необходимо поддерживать, вы можете попробовать CSS-транцы.

Сначала определите класс CSS следующим образом:

.rotated {
  transform: rotate(90deg);
  -ms-transform: rotate(90deg); /* IE 9 */
  -moz-transform: rotate(90deg); /* Firefox */
  -webkit-transform: rotate(90deg); /* Safari and Chrome */
  -o-transform: rotate(90deg); /* Opera */
}

И затем вы можете использовать jQuery для добавления класса при нажатии ссылки:

<img src="down_arrow.png" onclick="$(this).addClass('rotated');" />

Ответ 3

Используйте комбинацию правил css -webkit-transform и -moz-transform при щелчке изображения. Например, чтобы повернуть изображение на 90 градусов, примените следующие правила CSS при нажатии

$('img').click(function(){
    $(this).css({
        "-webkit-transform": "rotate(90deg)",
        "-moz-transform": "rotate(90deg)",
        "transform": "rotate(90deg)" /* For modern browsers(CSS3)  */
    });
});

Ответ 4

checkout this: JqueryRotate

У этого мало дел, вы можете увидеть один пример кода в самом изображении.

Итак, в вашем случае вы можете сделать это:

$(document).ready(function(){
   $('img[src^="down_arrow"]').click(function(){
      $(this).rotate(90);
   });
});

Ответ 5

Это позволит вам выполнить дополнительный поворот каждого клика

var degrees = 0;
$('.img').click(function rotateMe(e) {

    degrees += 90;

    //$('.img').addClass('rotated'); // for one time rotation

    $('.img').css({
      'transform': 'rotate(' + degrees + 'deg)',
      '-ms-transform': 'rotate(' + degrees + 'deg)',
      '-moz-transform': 'rotate(' + degrees + 'deg)',
      '-webkit-transform': 'rotate(' + degrees + 'deg)',
      '-o-transform': 'rotate(' + degrees + 'deg)'
    }); 

});

https://jsfiddle.net/Lnckq5om/1/

Ответ 6

Это пример поворота изображения 90deg, как показано ниже:

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