So I searched google and stackoverflow for a solution but I can not find an answer. My problem is that I can not rotate an element with Internet Explorer 8. I used this site and this stackoverflow topic as resources and finally came to the following result:
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 + ', M2开发者_高级运维2=' + 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
@*/
}
With Internet Explorer 8 the element does not rotate. Is there a bug in my code or is it bad anyway? I know I could use JQuery for this, but I don't want to depend on a library. I looked up the source of JQuery but could not find an answer there.
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')";
}
It's just for IE! ;)
精彩评论