在IE8中轉換對象（僅限旋轉），類似於使用CSS3轉換（旋轉），轉換源

我想獲得一個在IE8中工作的應用程序，並且我試圖讓我的CSS轉換工作正確在IE中。在IE8中轉換對象（僅限旋轉），類似於使用CSS3轉換（旋轉），轉換源

我能夠使用這個代碼來計算我的角度：

//LEGACY IE ROTATE 
var deg2radians = Math.PI * 2/360, 
    rad = s.stone_rotation * deg2radians, 
    costheta = Math.cos(rad), 
    sintheta = Math.sin(rad), 
    matrixValues = 'M11=' + costheta + ', M12='+ (-sintheta) +', M21='+ sintheta +', M22='+ costheta;

我然後使用內嵌樣式設置MS過濾器爲內嵌樣式：

element.style.cssText = "filter:progid:DXImageTransform.Microsoft.Matrix(" + matrixValues + ")";

然而，IE不保持原點，所以旋轉工作，但項目的位置不正確。我一直在尋找一些插件/庫......比如sylvester和其他一些jQuery插件。但我寧願讓自己獨立工作，因爲我在沒有任何圖書館的情況下建立這一切。

我只需要一些數學方面的幫助來正確設置原點。每個對象的頂部/左側/寬度/高度都有變量（頂部，左側，imgW，imgH）。

當然，事情的CSS3方面的一切工作正常，只是使用transform-origin與旋轉，矩陣並不是非常困難，但我無法弄清楚如何做參考點。

謝謝！

來源

2012-12-13 Joel Grannas

這裏有一個基本的問題，你如何簡化'2/360'？ – Shmiddty

如果你想設置爲元素的中心源，你可以使用這樣的事情：

rotate = function (degrees) { 

    while (degrees > 360) { 
     degrees -= 360; 

    } 

    while (degrees < 0) { 
     degrees += 360; 

    } 

    var matrix = element.filters.item("DXImageTransform.Microsoft.Matrix"), 
     degrees = degrees, 
     rad = (degrees * Math.PI)/180, 
     costheta = Math.cos(rad), 
     sintheta = Math.sin(rad); 

    matrix.M11 = costheta; 
    matrix.M12 = -sintheta; 
    matrix.M21 = sintheta; 
    matrix.M22 = costheta; 

    rad %= Math.PI; 
    if (rad > Math.PI/2) rad = Math.PI - rad; 

    costheta = Math.cos(rad), 
    sintheta = Math.sin(-rad); 

    element.style.top = y + Math.floor((h - h * costheta + w * sintheta)/2) + 'px'; 
    element.style.left = x + Math.floor((w - w * costheta + h * sintheta)/2) + 'px'; 

}

這是從我自己的圖書館，它並不完美，但至少對我來說不夠好。

來源

2012-12-13 21:48:28

我會給這個鏡頭，但我想我使用左上角，而不是中心......因爲我正在使用transform-origin：0 0; –

您可以使用JavaScript庫修復IE8和更低

http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/

，並繼續使用CSS

#o1 { 
    position: absolute; 
    top: 25px; 
    left: 25px; 
    border: solid 1px black; 
    position: absolute; 
    width: 100px; 
    height: 100px; 
    padding: 10px; 
    background-color: white; 
    -sand-transform: rotate(45deg); 
}

僅使用關鍵字-sand變換

你可以看到一個例子

http://www.useragentman.com/tests/cssSandpaper/rotateTest.html

來源

2016-06-17 02:17:57

在IE8中轉換對象（僅限旋轉），類似於使用CSS3轉換（旋轉），轉換源

回答

相關問題