1

我正在尝试让一个应用程序在 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 方面的一切都可以正常工作,只需使用变换原点和旋转,矩阵并不是非常困难,但我不知道如何做参考点。

谢谢!

4

2 回答 2

0

如果您尝试将原点设置在元素的中心,则可以使用以下内容:

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-13T21:48:28.723 回答
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-transform

你可以看到一个例子

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

于 2016-06-17T02:17:57.887 回答