css 过渡(旋转 + 平移)无法按预期工作

Question

我有这个代码。当我单击时，它会顺时针旋转小猫图像90度，并在右键单击时逆时针旋转90度。问题在于，当我将过渡添加到图像中时，当动画从90度旋转到180度时，动画就朝另一个方向旋转：而不是向右旋转90度，而是向左旋转270度。当我删除翻译属性时，这种烦人的过渡并没有发生。有人可以帮我吗？这是代码：

var deg = 0;
var $kitten = $(".kitty-spinner");
const tl = ($kitten.width() - $kitten.height()) / 2;
function rotate() {
  if (deg === -90) {
    deg = 270;
  };
  if (deg === 360) {
    deg = 0;
  }
  if (deg / 90 % 2 === 1) {
    if (deg / 90 % 4 === 1) {
      const transform = 'rotate(' + deg + 'deg)' + 'translate(' + tl + 'px, ' + tl + 'px)';
      $kitten.css({
        transform: transform
      });
    } else if (deg / 90 % 4 === 3) {
      const transform = 'rotate(' + deg + 'deg)' + 'translate(' + -tl + 'px, ' + -tl + 'px)';
      $kitten.css({
        transform: transform
      });
    }
  } else {
    const transform = 'rotate(' + deg + 'deg)';
    $kitten.css({
      transform: transform
    });
  }
}
$kitten.contextmenu(function(e) {
  e.preventDefault();
  deg -= 90;
  rotate();
});
$kitten.click(function(e) {
  e.preventDefault();
  deg += 90;
  rotate();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" class="kitty-spinner" style="transition-duration:0.5s"></img>

codepen：https：//codepen.io/skylaso1/pen/qqpzew

Answer 1

一个想法，不是在图像上同时进行转换。

在这里，我创建了一个包装器，我用于翻译，然后将旋转留在图像中。

也不会使您发送到旋转的角度调节，因为当它到达270时，下一个是0 ..然后，它将从270的270划分到0，从而使其一直旋转。只需允许角度继续增加即可。例如。270、360、450等

ps。您还需要等待图像加载之前的大小。

var deg = 0;
var $kitten = $(".kitty-spinner");
var $kittenWrapper = $(".kitty-wrapper");
let t1;
$kitten.on('load',function () {
  tl = ($kitten.width() - $kitten.height()) / 2;
});
function rotate() {
  let deg2 = deg % 360;
  let tran2 = 'translate(0px,0px)';
  if (deg2 == 90 || deg2 == 270) {
    tran2 = `translate(-${tl}px, +${tl}px`;
  }
  $kittenWrapper.css({
    transform: tran2
  });  
  const transform = 'rotate(' + deg + 'deg)';
  $kitten.css({
    transform: transform
  });
}
$kitten.contextmenu(function(e) {
  e.preventDefault();
  deg -= 90;
  rotate();
});
$kitten.click(function(e) {
  e.preventDefault();
  deg += 90;
  rotate();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="kitty-wrapper" style="transition-duration:0.5s">
<img src="https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" class="kitty-spinner"
  style="transition-duration:0.5s"></img>
</div>