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

一個想法是，不對圖像進行兩個變換。

在這里，我創建了一個包裝器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>