Cross-browser Rotation Transformation with CSS23rd 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

  1. JP on said:

    this is no cross browser.. not working on IE7

  2. Samuli Hakoniemi on 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.

  3. supertivo on 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 :)

  4. Derrick on said:

    Im running IE7 and it seems to work just fine.

  5. Pingback: tripwire magazine | tripwire magazine

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

  7. Samuli Hakoniemi on 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.

  8. Pingback: 155+ Fresh Community Links for Designers and Developers | tripwire magazine

  9. Pingback: 155+ Fresh Community Links for Designers and Developers | Afif Fattouh - Web Specialist

  10. Pingback: Opera: CSS rotation and other transformations | Kadimi

  11. Kadimi on 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.

  12. Samuli Hakoniemi on 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.

  13. Pingback: CSS3: compatibilità cross-browser...da oggi! | paitadesignblog

  14. Pingback: matrix transformations

  15. Pingback: Great CSS3 and HTML5 Resources | Front-end Developer

  16. This is interesting. Can you explain the .htc part in a bit more detail, please? :-)

  17. Samuli Hakoniemi on 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 :)

  18. ardianzzz on said:

    its work! thank you

  19. Roland Hentschel on said:

    @JP
    Hi!

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

    ( -: roland :- )

  20. zooro on 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

  21. Samuli Hakoniemi on 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.

  22. Koen on said:

    Great! Thanks for helping me out with the ie rotation! Works perfect..

  23. leipuri on said:

    IE sucks! I change to use firefox because it show websites better and faster.

  24. Pingback: Cross Browser Text and Image Rotation using CSS and Javascript - bCreatives

  25. couldn’t find the htc file :(

  26. Pingback: CSS: rotazioni e trasformazioni cross-browser | Gabriele Romanato

  27. ian on 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.

  28. Samuli Hakoniemi on 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

  29. David on 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

  30. Tom Lev on said:

    Works on FF, Chrome, IE9 – Thanks!

  31. Pingback: [Webdesign] Rotation d’éléments avec CSS3 (IE, FF, Opera, Chrome, Safari) | Websourcing.fr

  32. Pingback: Rotating DOM Elements with CSS and jQuery « Ben Knows Code

  33. Muhammad on said:

    Works on all. Great! Thanks.