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

Question

I am trying to get an application working in IE8, and I have been hung up on trying to get my CSS transforms working properly in IE.

I am able to calculate my angle using this code:

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

I then set the MS filter in an inline style using an inline styles:

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

However, IE doesn't keep the origin point, so the rotation works, but the location of the item is not proper. I've been looking into some plugins/libraries... such as sylvester, and a few other jQuery plugins. But i'd rather just get this working on my own, as I am building this all without any library.

I just need some help with the math to get the origin point set properly. I have variables (top, left, imgW, imgH) for the top/left/width/height for each object.

Of course, everything with the CSS3 side of things works fine, just using the transform-origin along with rotate, and the matrix wasn't super difficult, but i can't figure out how to do the reference point.

thanks!

Answer 1

If you are trying to set origin at center of element, you can use something like this:

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

}

It's from my own library and it's not perfect, but good enough for me at least.

Answer 2

You can use the javascript library to fix IE8 and lower

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

and continue using 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);
}

using only the keyword -sand-transform

You can see an example in

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