Tuesday 19 June 2012

Cross Browser Rotation Even IE 6


For IE add the following. All you have to do is replace the angle variable to your desired angle.

var element = document.getElementById("box");
var angle = 20;
radians = parseInt( angle ) * Math.PI * 2 / 360;
calSin = Math.sin(radians);
calCos = Math.cos(radians);
element.style.filter = 'progid:DXImageTransform.Microsoft.Matrix(M11=' + calCos + ', M12=-' + calSin + ',M21=' + calSin + ', M22=' + calCos + ', sizingMethod="auto expand")';


For the rest of the browsers here is the code:


var angle = 20;

element.style["rotation"] =   angle + " deg";
// CSS3
element.style.MozTransform = "rotate(" +  angle  + "deg)";
// Moz
element.style.OTransform = "rotate(" +  angle  + "deg)";
// Opera
element.style.WebkitTransform = "rotate(" +  angle  + "deg)";
// Webkit/Safari/Chrome

No comments:

Post a Comment