KaisarCode

Scripting 4 freeDOM



JavaScript Rotate

by KaisarCode

Before anything... grab the 8 ball and spin it.

ball

This is a library I've written for CSS rotations using JavaScript (yes, not freakin' JQuery). It can rotate any HTML Element, even in Internet Explorer. It doesn't use Canvas or Flash workarounds, or the 4 position IE lie.

I've decided to do it myself, because there wasn't a reliable solution on the vast Internet.

Not matters if it's an image, a div, a text or whatever, this just rotates the element itself. The only requirement is that it must to be block or inline-block.

Runs smoothly on mobile devices, and also on IE 7 and 8, but don't try to test it under the compatibility mode of the IE10, because, not just my library doesn't works... even the native CSS rotation will not work. But that's not a problem because, compatibility modes are for developers, not for regular users (I mean, if they are on IE8 mode... is because they're actually on an IE8).

The Code

Well, this is not the code that achieves the spin effect, but is the starting point. We will see the spin effect as soon as we review this part.

JS
function kcRotate(elem,deg){
		var Dx;
		var Dy;
		var iecos;
		var iesin;
		var halfWidth;
		var halfHeight;
		var dummy;
		
		//degrees to radians
		var rad=deg*(Math.PI/180);
		
		//get sine and cosine of rotation angle
		iecos=Math.cos(rad);
		iesin=Math.sin(rad);
		
		//get element's size
		halfWidth=elem.offsetWidth/2;
		halfHeight=elem.offsetHeight/2;
		
		//calculating position correction values
		Dx=-halfWidth*iecos + halfHeight*iesin + halfWidth;
		Dy=-halfWidth*iesin - halfHeight*iecos + halfHeight;

		//applying CSS3 rotation
		elem.style.transform="rotate("+rad+"rad)";
		
		//vendor prefixed rotations
		elem.style.mozTransform="rotate("+rad+"rad)";
		elem.style.webkitTransform="rotate("+rad+"rad)";
		elem.style.OTransform="rotate("+rad+"rad)";
		elem.style.msTransform="rotate("+rad+"rad)";
		
		//rotation Matrix for IExplorer
		elem.style.filter="progid:DXImageTransform.Microsoft.Matrix(M11="+iecos+", M12="+-iesin+", M21="+iesin+", M22="+iecos+", Dx="+Dx+", Dy="+Dy+", SizingMethod=auto expand)";
		elem.style.msFilter="progid:DXImageTransform.Microsoft.Matrix(M11="+iecos+", M12="+-iesin+", M21="+iesin+", M22="+iecos+", Dx="+Dx+", Dy="+Dy+", SizingMethod=auto expand)";

		//Fixing black box issue on IE9
		dummy=document.createElement("div");
		dummy.innerHTML='';
		if(dummy.getElementsByTagName("br").length==1) elem.style.filter="none";
	delete dummy;
}

As you may see, the function kcRotate expects two parameters: elem and deg; being "elem" the HTML element you want to rotate, and "deg" the required rotation angle.

So, the following code, will look like the next 8 ball:

var elem=document.getElementById("ball");
kcRotate(elem,63);

ball

Which is rotated 63 degrees clockwise.

(No, It doesn't spins already, be patient... XD)

How?

  • Well, first of all, we define some variables at the top of the function (Because I'm an obsessive asshole, and if you're not, you should).
  • What we do next is to convert the degrees which we pass as parameters into radians (because that's more a "javascriptely" unit), we will use that as the real rotation value.
  • Next, we will need to retrieve the Sine and Cosine of that value, to make some fixes for IExplorer later.
  • Also, we have to calculate the half of the element's size, to get later a sort of a "pivot point" to rotate it.
  • And then there's this magical calculation that uses the sine and cosine of the radian value, that allows you to correct the position of the rotated element in IExplorer: Just copy it as it is, it's always the same for any case (A.K.A. Math crap).
Dx=-halfWidth*iecos + halfHeight*iesin + halfWidth;
Dy=-halfWidth*iesin - halfHeight*iecos + halfHeight;

I'll not enter in details because we would enter in the obscure field of trigonometry and matrixes too. But think of it as the "translate" property of CSS. If you play with this values you'll understand better.

Okay, move on.

  • Finally, we apply the CSS properties for each required browser's case
  • Notice that we've used most of the values just for old versions of IE (IE9 included)... If not, the "rotate" CSS property handles everything.
  • And that's it, we execute the function and voilá

Downloads

kc-rotate.zip

The Spin

Okay, I know I've promised to talk about the spinning rotation. But, I'll take the next post to talk a little bit better about it.

So, move to the next one and I'll see you there.