在IE8中旋轉：翻譯不能正常工作

我需要在Web應用程序中旋轉圖像。在之前的post中，我向他解釋說，由於中心點發生變化，所以在旋轉時我需要「翻譯」圖像。在IE8中旋轉：翻譯不能正常工作

我使用HeyGrady 2D Transfrom JQuery插件進行旋轉，並提供翻譯，可以在FF/Chrome/Safari/IE9上正常工作。但是，在IE8上這並不好。

請看下面link。

如果您在FF/Chrome/Safari/IE9上運行此項，圖像旋轉得很好（保持在黑色邊框內）。但是，如果你在IE8上運行它，當旋轉到90或270度時，它將穿過黑色邊界邊界。

插件項目頁面提到「IE也缺乏對transform-origin和translate（）[...]的支持jQuery Transform插件會自動處理這些計算」。但是，似乎並沒有這樣做。

任何人有任何想法可能是什麼問題？

謝謝！

來源

2011-11-29 Joni

我最近使用[jQueryRotate（HTTP：// code.google.com/p/jqueryrotate/）在IE8中取得了不錯的效果。 – Blazemonger

我也使用HeyGrady的jQuery變換插件在IE 8中遇到了同樣的問題。這裏有一個修復加入這個到execMatrix功能，圍繞行290：

替換此行：

this.fixPosition(matrix, tx, ty);

有了這個：

// factor in the object's current rotation so translation remains straight up/down/left/right 
    // otherwise, object will be translated along the rotated axis, which produces undesirable effects 
    var rotation = parseInt(this.$elem.css('rotate')) * -1, // the current rotation in degrees, inverted 
     radians = rotation * (Math.PI/180), // convert degrees to radians 
     newX = (tx * (Math.cos(radians))) - (ty * (Math.sin(radians))), // calculate new x 
     newY = (tx * (Math.sin(radians))) + (ty * (Math.cos(radians))); // calculate new y 
    this.fixPosition(matrix, newX, newY);

來源

2012-09-20 16:11:26 brendanmckeown

在IE8中旋轉：翻譯不能正常工作

回答

相關問題