2011-10-05 3 views
3

Итак, я искал google и stackoverflow для решения, но я не могу найти ответ. Моя проблема заключается в том, что я не могу повернуть элемент с Internet Explorer 8. Я использовал this site и this stackoverflow topic как ресурсы, и, наконец, пришли к следующему результату:Вращение Javascript IE8

function rotateElement(e, deg) { 
    var deg_str = deg + ""; 
    var rotate_transform = "rotate(" + deg + "deg)"; 

    var degreeToIEMatrix = function(deg){ 
     var deg2radians = Math.PI/180; 
     var rad = deg * deg2radians ; 
     var costheta = Math.cos(rad); 
     var sintheta = Math.sin(rad); 

     var M11 = costheta; 
     var M12 = -sintheta; 
     var M21 = sintheta; 
     var M22 = costheta; 

     return 'M11=' + M11 + ', M12=' + M12 + ', M21=' + M21 + ', M22=' + M22; 
    }; 

    /* @cc_on 
     matrix_str = degreeToIEMatrix(deg); 
     document.write(matrix_str); 
     filter_str = "progid:DXImageTransform.Microsoft.Matrix(" + matrix_str + ", sizingMethod='auto expand')"; 
    @*/ 

    e.style["rotation"] = deg_str + "deg";  // CSS3 
    e.style.MozTransform = rotate_transform; // Moz 
    e.style.OTransform = rotate_transform;  // Opera 
    e.style.WebkitTransform = rotate_transform; // Webkit/Safari/Chrome 
    e.style["zoom"] = "1"; // ??? Probably IEs 

    /* @cc_on 
     e.style.filter = filter_str;   // IE 6/7 
     e.style.MsFilter = filter_str;   // IE 8 
    @*/ 
} 

С Internet Explorer 8 элемент не вращается. Есть ли ошибка в моем коде или все равно? Я знаю, что могу использовать JQuery для этого, , но я не хочу зависеть от библиотеки. Я искал источник JQuery, но не мог найти ответа там.

+0

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

+0

http://css3please.com/ – SLaks

+0

@SLaks первый использует библиотеки, а второй - css (использует JQuery в обратном направлении). – Olesma

ответ

6
function rotate(angle, elem){ 
     if (angle >= 0) { 
     var rotation = Math.PI * angle/180; 
    } else { 
     var rotation = Math.PI * (360+angle)/180; 
    } 
     var c = Math.cos(rotation), 
     s = Math.sin(rotation); 
     elem.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11="+c+",M12="+(-s)+",M21="+s+",M22="+c+",SizingMethod='auto expand')"; 
} 

Это просто для IE! ;)

+1

Ну, я думаю, что это имеет какое-то отношение к моим условным комментариям: S Так что это на самом деле хороший ответ :) СПАСИБО! – Olesma

+0

Вам даже не нужно, если: всегда используйте вторую ветку. – aredridel

+0

, если вы это сделаете, было бы безопаснее использовать эту строку: 'var rotation = Math.PI * (360 + (угол% 360))/180;' – nirazul