CSS rotation – How to Use Rotation via CSS

Is it possible or not? And how? Sometimes, ordinary webdesigner asking himself this question. And here – he can faced with some difficulties. In fact, different browsers still don`t have defined css rules which we can use to rotate html elements. And, they provide us with own custom css styles for each browser. So in result – we should combine different methods, styles to get it to work cross-browser. Today I will tell what we can use for different browsers.

Mozilla Firefox

As example – we need to rotate some element for 45 degrees. For this browser we can use next styles (we will use mozilla – related styles with prefix ‘-moz’ and webkit):

1 -moz-transform:rotate(45deg);
2 -webkit-transform:rotate(45deg);

One note, it seems that these styles working only in latests mozilla versions (4.x and upper)

Opera

For Opera we can use next styles (as you noticed – opera have own prefix ‘-o’):

1 -o-transform:rotate(45deg);

And again, this will available only for Opera version 10.50 and above.

Internet Explorer

Starting from IE version 9 (and above) we can use next styles (again – new prefix – ‘-ms’):

1 -ms-transform:rotate(45deg);

In older version of IE this is possible too, but using another ways – via filters.

Method 1 – using DXImageTransform.Microsoft.BasicImage.

1 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

Here – rotation not mean value of angle, this property accept four values: 0 mean 0 degrees, 1 mean 90 degrees, 2 – 180 and 3 – 270 degrees. So we can`t set own custom angle in 45 degrees, but, look to method 2

Method 2 – using DXImageTransform.Microsoft.Matrix.

This is a little more difficult way, and we will use JavaScript to set necessary values for our Matrix. Here are sample of this JS:

1 var rad = (45 * Math.PI) / 180.0, //preparing filter values
2 cos = Math.cos(rad),
3 sin = Math.sin(rad);
4
5 var filter='progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand", M11 = ' + cos + ', M12 = ' + (-sin) + ', M21 = ' + sin + ', M22 = ' + cos + ')';
6 var elem = document.getElementById('my_image1'); // our destination object
7 elem.style.filter = filter;

Where 45 in first line – our angle. So in result we will have:

 

Sample element 1

 

And here you can see how it working in action (if we will loop rotation with step in 1 degree):

CSS rotation – How to Use Rotation via CSS

 

Not perfect, right? And all just because object rotating over top-left corner, not from center of object. We will need to modify script a little – apply custom margins too, something like that:

CSS rotation – How to Use Rotation via CSS

 

Its source code:

1 <img src="image.gif" id="sample3" />
01 var elem3 = document.getElementById('sample3');
02
03 // remember initial sizes
04 var sizeopt={
05     w:elem3.width,
06     h:elem3.height
07 };
08
09 var angle=0;
10 setInterval(function(){
11     angle+=1;
12
13     //preparing filter values
14     var rad = (angle * Math.PI) / 180.0,
15         cos = Math.cos(rad),
16         sin = Math.sin(rad);
17
18     var filter='progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand", M11 = ' + cos + ', M12 = ' + (-sin) + ', M21 = ' + sin + ', M22 = ' + cos + ')';
19     var text="-ms-filter:"+filter+";filter:"+filter+";";
20
21     elem3.style.cssText=text; // apply filter
22
23     var w=elem3.width; // obtain element sizes again
24     var h=elem3.height;
25
26     elem3.style.marginLeft=-Math.round((w-sizeopt.w)/2); // apply margins
27     elem3.style.marginTop=-Math.round((h-sizeopt.h)/2);
28 },40);

After all, I made result of rotated object which should supported by most of known browsers:

 

CSS rotation – How to Use Rotation via CSS

 

Its code (CSS + JS):

1 #sample4 {
2 -moz-transform:rotate(45deg);
3 -webkit-transform:rotate(45deg);
4 -o-transform:rotate(45deg);
5 -ms-transform:rotate(45deg);
6 }
1 var rad = (45 * Math.PI) / 180.0,
2 cos = Math.cos(rad),
3 sin = Math.sin(rad);
4 var filter='progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand", M11 = ' + cos + ', M12 = ' + (-sin) + ', M21 = ' + sin + ', M22 = ' + cos + ')';
5
6 var elem4 = document.getElementById('sample4');
7 elem4.style.filter = filter;

Conclusion

I hope that our overview was interesting and useful for you. Good luck!