CSS rotation – How to Use Rotation via CSS

CSS rotation – result overview

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):

-moz-transform:rotate(45deg);
-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’):

-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’):

-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.

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:

var rad = (45 * Math.PI) / 180.0, //preparing filter values
cos = Math.cos(rad),
sin = Math.sin(rad);

var filter='progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand", M11 = ' + cos + ', M12 = ' + (-sin) + ', M21 = ' + sin + ', M22 = ' + cos + ')';
var elem = document.getElementById('my_image1'); // our destination object
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):

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:

Its source code:

<img src="image.gif" id="sample3" />

var elem3 = document.getElementById('sample3'); 

// remember initial sizes
var sizeopt={
    w:elem3.width,
    h:elem3.height
};

var angle=0;
setInterval(function(){
    angle+=1;

    //preparing filter values
    var rad = (angle * Math.PI) / 180.0,
        cos = Math.cos(rad),
        sin = Math.sin(rad);

    var filter='progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand", M11 = ' + cos + ', M12 = ' + (-sin) + ', M21 = ' + sin + ', M22 = ' + cos + ')';
    var text="-ms-filter:"+filter+";filter:"+filter+";";

    elem3.style.cssText=text; // apply filter

    var w=elem3.width; // obtain element sizes again
    var h=elem3.height;

    elem3.style.marginLeft=-Math.round((w-sizeopt.w)/2); // apply margins
    elem3.style.marginTop=-Math.round((h-sizeopt.h)/2);
},40);

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

Its code (CSS + JS):

#sample4 {
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
}

var rad = (45 * Math.PI) / 180.0,
cos = Math.cos(rad),
sin = Math.sin(rad);
var filter='progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand", M11 = ' + cos + ', M12 = ' + (-sin) + ', M21 = ' + sin + ', M22 = ' + cos + ')';

var elem4 = document.getElementById('sample4');
elem4.style.filter = filter;

Conclusion

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

Enjoyed this Post?

If you enjoyed this article, feel free to share our tutorial with your friends.

Stay connected with us:

Written by: admin on March 17, 2011.

Script Tutorials