在 IE8 中变换对象（仅旋转），类似于使用 CSS3 transform(rotate), transform-origin

Question

我正在尝试让一个应用程序在 IE8 中运行，我一直在试图让我的 CSS 转换在 IE 中正常运行。

我可以使用以下代码计算我的角度：

//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 方面的一切都可以正常工作，只需使用变换原点和旋转，矩阵也不是很困难，但我不知道如何做参考点。

谢谢！

Answer 1

您可以使用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-transform

你可以在

中看到一个例子

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

Answer 2

如果你想在元素的中心设置原点，你可以使用这样的东西：

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

}

它来自我自己的图书馆，并不完美，但至少对我来说已经足够了。