Cross-browser Rotation Transformation with CSS
I was about not to publish anything before Christmas – just calming down, taking some extra time to get my blog design finished, plugins installed, and so on..
..but no. I got way too excited when I heard today that Opera 10.5 pre-alpha for Labs was released. In other words, this means that an updated version of Opera’s layout engine, Presto, was out to play with – meaning, that CSS3 Transformations and Transitions are available also for Opera.
In this article, we write some lines of CSS and create rotating transform effect with all the common browsers, including Internet Explorer and the latest version of Opera.
Issues with Opera and IE
Opera offers CSS3 Transitions support in Opera Presto 2.3, at least partially. By the specification, we’re able to take advantage of -o-transform:rotate(deg);.
IE is a bit trickier (big surprise). Fortunately there’s a nice filter available, called Matrix. The values for matrix are quite complicated, hence some assistance with Javascript is needed.
In my case, I’ve created some functionality and bound it with HTC file to CSS selectors. The functionality is based on values of property -ms-transformation. I’ve also implemented -ms-transition for transitions, but this will be examined further on later posts.
Example code
In this example, I’ll be using A-elements for hover support in IE6. I’ve already written a small implementation similar to Whatever:hover, but that “project” is still taking baby steps.
So let’s cut the chase and create some lines of code:
HTML
<a href="#" id="one" class="rotate">This is 45deg -rotated element.</a>
<a href="#" id="two" class="rotate">This is 10deg -rotated element, which rotates to 45deg when hovered.</a>
CSS
#one {
behavior:url(-ms-transform.htc);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
}
#two {
behavior:url(-ms-transform.htc);
-moz-transform:rotate(10deg);
-webkit-transform:rotate(10deg);
-o-transform:rotate(10deg);
-ms-transform:rotate(10deg);
}
#two:hover {
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
}
Demo
You can view demo at Demo section: Cross-browser Rotation Transformation with CSS.
Final thoughts
Although everything “is not fully there”, this article shows the possibility for implementing cross-browser CSS3 Transformations purely with CSS.
In addition, this post works as an opening post of my blog. Feel free to give feedback. Merry Christmas!
Comments
this is no cross browser.. not working on IE7
Seems peculiar. I’ve tested it both with IE7 itself and with browsers with Trident for IE7 (like Lunascape). Most likely it’s some kind of issue with property prefix for -ms-transform, but I have to test it further.
But if there are any errors thrown, feel free to post them here.
it works in IE7 (v.7.0.5730)
But as u can guess text looks blurred in ie7; anyway it works! Nicely done samuli, great article :)
Im running IE7 and it seems to work just fine.
I’ve tested in IE(6,7) via IETester and IE8 that I have instaled, and it only worked in IE6. The current version of Opera does not support CSS Transforms. The browser that has the better quality is by far IE6, on FF and Safari the text appears very very jagged.
I’ve tested with Internet Explorer Collection – which I personally prefer, with IE Tester (version 0.3.2, not the latest) and with some native installations of IE and they all worked fine. But I will debug and fine-tune the HTC file later, the problem is probably in the prefix of property, or in some other rather trivial issue.
About Opera: Opera 10.5 pre-alpha was released only few days ago being the only version of Opera (besides Opera Mini 5 beta, which I haven’t tested) which uses Presto 2.5 as layout engine. Opera introduced support for CSS3 Transformations and Transitions since Presto 2.3, which was skipped from all the desktop versions.
I’ve been working on a WordPress theme, when trying to make it fully compatible with IE6, I noticed that rotating objects breaks their transparency.
If someone knows how to make a png transparent and rotate it under IE6 that would help me (us) a lot.
Is this like http://transformie.com ?
This approach is very similar to existing javascript / jquery snippets and plugins. The greatest difference is setting properties and their values through CSS, according to the common specifications.
I’m on my way writing css3.htc to offer support eg. for gradients and rgba() color values. Also basic transitions should be soon available.
My goal is not to reinvent the wheel, but to unify and add better support for Internet Explorer.
This is interesting. Can you explain the .htc part in a bit more detail, please? :-)
I’m about to rewrite ms-css3.htc during summer and then publish a detailed article about using it in real cases. Wait until then :)
its work! thank you
Trackbacks