Cross-browser Rotation Transformation with CSS

23rd of Dec, 2009 – Samuli Hakoniemi

UPDATE

This project is updated! Visit the GitHub Project Page for details.

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!

35 thoughts on “Cross-browser Rotation Transformation with CSS”

JP on 23rd of Dec 2009 at 19:21 said:

this is no cross browser.. not working on IE7
Samuli Hakoniemi on 23rd of Dec 2009 at 19:45 said:

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.
supertivo on 23rd of Dec 2009 at 19:59 said:

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 :)
Derrick on 23rd of Dec 2009 at 20:21 said:

Im running IE7 and it seems to work just fine.
Pingback: tripwire magazine | tripwire magazine
Tutorial City on 25th of Dec 2009 at 13:58 said:

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.
Samuli Hakoniemi on 25th of Dec 2009 at 15:19 said:

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.
Pingback: 155+ Fresh Community Links for Designers and Developers | tripwire magazine
Pingback: 155+ Fresh Community Links for Designers and Developers | Afif Fattouh - Web Specialist
Pingback: Opera: CSS rotation and other transformations | Kadimi
Kadimi on 9th of Jan 2010 at 11:37 said:

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.
anom on 12th of Jan 2010 at 14:57 said:

Is this like http://transformie.com ?
Samuli Hakoniemi on 12th of Jan 2010 at 16:31 said:

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.
Pingback: CSS3: compatibilità cross-browser...da oggi! | paitadesignblog
Pingback: matrix transformations
Pingback: Great CSS3 and HTML5 Resources | Front-end Developer
safetycopy on 18th of May 2010 at 23:47 said:

This is interesting. Can you explain the .htc part in a bit more detail, please? :-)
Samuli Hakoniemi on 19th of May 2010 at 09:09 said:

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 :)
ardianzzz on 5th of Jun 2010 at 08:54 said:

its work! thank you
Roland Hentschel on 7th of Dec 2010 at 13:13 said:

@JP
Hi!

Well, may be it didn’t work in IE, because it wasn’t tested online or on a localhost?

( -: roland :- )
zooro on 30th of Jan 2011 at 15:55 said:

I hope this is still alive. I have been trying to make a simple cross browser rotated menu. It works great in FF and Chrome but IE8 only shows the list hover image when the div is entered from the right. I think this is a bug. I would greatly appreciate your feedback.

IE rotation problem

body{font-family: ‘Comic Sans MS’, cursive;}

.menu{
margin:50px auto;
background:grey;
width:200px; height:200px;
filter:progid:DXImageTransform.Microsoft.Matrix
(sizingmethod=’auto expand’,M12=’0.5′,M21=’-0.5′,M11=’0.866′,M22=’0.866′);
}

.menu ul {list-style:none}
.menu li {height:45px}
.menu li:hover{list-style-image:url(‘arrow.gif’)}

home
contact
news
links
Samuli Hakoniemi on 31st of Jan 2011 at 13:55 said:

Hi zooro,

this project is currently half-dead. I simply don’t have enough time for progress. I ran couple of nastier issues and then this was practically frozen.

However, I strongly suggest checking Zoltan “Du Lac” Hawryluk’s blog: http://www.useragentman.com/blog/ . It has both good blog posts about transformations + transitions and his project cssSandpaper seems to be more advanced.
Koen on 7th of Mar 2011 at 17:36 said:

Great! Thanks for helping me out with the ie rotation! Works perfect..
leipuri on 26th of Mar 2011 at 13:35 said:

IE sucks! I change to use firefox because it show websites better and faster.
Pingback: Cross Browser Text and Image Rotation using CSS and Javascript - bCreatives
Pushpinder Bagga on 30th of Apr 2011 at 07:09 said:

couldn’t find the htc file :(
Samuli Hakoniemi on 1st of May 2011 at 13:51 said:

This post is bit outdated and I’m planning to do write a new article with updated information.

However, the htc file mentioned in post can be found from here: http://demo.hakoniemi.net/Cross-browserRotateTransformationwithCSS/-ms-transform.htc
Pingback: CSS: rotazioni e trasformazioni cross-browser | Gabriele Romanato
ian on 23rd of Sep 2011 at 23:40 said:

Strange… I can grab the .htc and see your demo working, but using the same code won’t work when I try and appropriate the code. I must be missing something.
Samuli Hakoniemi on 25th of Sep 2011 at 00:39 said:

It may be cause of server sending wrong mime-type and IE can’t interpret htc appropriately. Check this: http://support.microsoft.com/kb/306231
David on 17th of Nov 2011 at 02:05 said:

I know this is an old post, but came across it in my searching. Opera and IE support seems a lot better now, the CSS transform / rotate code works reasonably well. I’ve found a variety of websites useful for quickly recalling and generating CSS3 code, in particular for the “transform” operator I quite like http://www.cssrotate.com
Tom Lev on 24th of Jan 2012 at 04:52 said:

Works on FF, Chrome, IE9 – Thanks!
Pingback: [Webdesign] Rotation d’éléments avec CSS3 (IE, FF, Opera, Chrome, Safari) | Websourcing.fr
Pingback: Rotating DOM Elements with CSS and jQuery « Ben Knows Code
Muhammad on 18th of Nov 2012 at 09:41 said:

Works on all. Great! Thanks.