如何解决 JQuery 中的旋转图像问题？

Question

我有一只独角鲸，它会游来游去并朝它前进的方向翻转。单击它时，它会旋转 360 度，然后继续游动。但在旋转之后，它会停止朝它前进的方向翻转。我该如何解决这个问题？

var $narwhal = $('#narwhalId');
moveNarwhal($narwhal);

function moveNarwhal($narwhal) {
  var myX = Math.floor(Math.random() * ($(window).width() - $narwhal.width()))
  var myY = Math.floor(Math.random() * ($(window).height() - $narwhal.height()))
  if ($narwhal.offset().left < myX) {
    fishFlip($narwhal);
  } else fishFlipBack($narwhal);
  $narwhal.animate({
    top: myY,
    left: myX
  }, 4000, function() {
    moveNarwhal($narwhal);
  }).delay(500);
}

var tmpAnimation = 0;

$($narwhal).click(function() {
  $narwhal.stop(true);
  var element = $narwhal;
  tmpAnimation = tmpAnimation + 360;
  $({
    degrees: tmpAnimation - 360
  }).animate({
    degrees: tmpAnimation
  }, {
    duration: 1000,
    step: function(now) {
      element.css({
        transform: 'rotate(' + now + 'deg)'
      });
    }
  });
  moveNarwhal($narwhal);
});

function fishFlip(IdRef) {
  IdRef.addClass('flipped')
}

function fishFlipBack(IdRef) {
  IdRef.removeClass('flipped')
}

.flipped {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

#narwhalId {
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<img id="narwhalId" src="http://placekitten.com/100/100" />

Answer 1

您需要检查并删除转换（如果它内嵌在元素上）。为了确保翻转状态仍然保持，还建议检查并添加另一个翻转 transform 作为 if 到旋转函数

var $narwhal = $('#narwhalId');
moveNarwhal($narwhal);

function moveNarwhal($narwhal) {
  var myX = Math.floor(Math.random() * ($(window).width() - $narwhal.width()))
  var myY = Math.floor(Math.random() * ($(window).height() - $narwhal.height()))
  if ($narwhal.offset().left < myX) {
    fishFlip($narwhal);
  } else fishFlipBack($narwhal);
  $narwhal.animate({
    top: myY,
    left: myX
  }, 4000, function() {
    moveNarwhal($narwhal);
  }).delay(500);
}

var tmpAnimation = 0;

$($narwhal).click(function() {
  $narwhal.stop(true);
  var element = $narwhal;
  tmpAnimation = tmpAnimation + 360;
  $({
    degrees: tmpAnimation - 360
  }).animate({
    degrees: tmpAnimation
  }, {
    duration: 1000,
    step: function(now) {
      if(element.hasClass('flipped')) {
        element.css({
          transform: 'rotate(' + now + 'deg) scaleX(-1)'
        });
      } else {
        element.css({
          transform: 'rotate(' + now + 'deg)'
        });
      }
    }
  });
  moveNarwhal($narwhal);
});

function fishFlip(IdRef) {
  $narwhal.css('transform','');
  IdRef.addClass('flipped')
}

function fishFlipBack(IdRef) {
  IdRef.removeClass('flipped')
}

.flipped {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

#narwhalId {position:absolute;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<img id="narwhalId" src="http://placekitten.com/100/100" />

如何解决 JQuery 中的旋转图像问题？

How can I fix this rotating image issue in JQuery?

css

jquery

css-transforms