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( 45 deg); |
2 |
-webkit-transform:rotate( 45 deg); |
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( 45 deg); |
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( 45 deg); |
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, |
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' ); |
7 |
elem.style.filter = filter; |
Where 45 in first line – our angle. So in result we will have:
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:
1 |
< img src = "image.gif" id = "sample3" /> |
01 |
var elem3 = document.getElementById( 'sample3' ); |
10 |
setInterval( function (){ |
14 |
var rad = (angle * Math.PI) / 180.0, |
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+ ";" ; |
21 |
elem3.style.cssText=text; |
26 |
elem3.style.marginLeft=-Math.round((w-sizeopt.w)/2); |
27 |
elem3.style.marginTop=-Math.round((h-sizeopt.h)/2); |
After all, I made result of rotated object which should supported by most of known browsers:
Its code (CSS + JS):
2 |
-moz-transform:rotate( 45 deg); |
3 |
-webkit-transform:rotate( 45 deg); |
4 |
-o-transform:rotate( 45 deg); |
5 |
-ms-transform:rotate( 45 deg); |
1 |
var rad = (45 * Math.PI) / 180.0, |
4 |
var filter= 'progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand", M11 = ' + cos + ', M12 = ' + (-sin) + ', M21 = ' + sin + ', M22 = ' + cos + ')' ; |
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!