如何在 JQuery 中解决此旋转图像问题？答案

【问题标题】：How can I fix this rotating image issue in JQuery?如何在 JQuery 中解决此旋转图像问题？
【发布时间】：2020-03-22 20:15:07
【问题描述】：

我有一只独角鲸，它会四处游动并朝它要去的方向翻转。当它被点击时，它会旋转 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" />

【问题讨论】：

它对我有用。（我已经更新了演示 sn-p 以包含一个图像，以便我们可以看到它的工作）
它可以工作，但旋转一次后，它再也不会翻转图像，我不知道为什么。它仍应将图像沿其前进方向翻转，但一旦旋转就不会这样做。
我怀疑同时支持缩放和过滤的浏览器会双重翻转，所以看起来根本没有翻转，但这只是一个想法
我不知道是不是浏览器的问题。对我（Chrome，osx）来说，它似乎完全正常工作，并且每次方向改变时都会翻转。

标签： jquery css css-transforms

【解决方案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" />

【讨论】：