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插件。但我宁愿让我自己工作，因为我正在构建这个没有任何库。

我只需要一些数学帮助就可以正确设置原点。我有每个对象的上/左/宽度/高度的变量（top，left，imgW，imgH）。

当然，使用CSS3方面的所有东西都可以正常工作，只需使用变换原点和旋转，矩阵不是很难，但我无法弄清楚如何做参考点。 / p>

谢谢！

Answer 1

如果您尝试将原点设置为元素的中心，则可以使用以下内容：

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

}

它来自我自己的图书馆并不完美，但至少对我来说还不错。

Answer 2

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

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

2 个答案: