Question

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

＆＃13;

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();
});

＆＃13;

<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>

＆＃13;

Codepen：https://codepen.io/skylaso1/pen/Qqpzew

Answer 1

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

这里我创建了一个包装器div，用于翻译，并将旋转保留在图像上。

也不要模拟你发送到旋转的角度，因为当它到达270时，下一个是0 ..然后它将从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>

Css转换（旋转+转换）不能按预期工作

1 个答案: