using CSS3 transform:rotate in IE origin problem

Question

I'm working on a project that uses the new CSS3 transform:rotate(180deg) feature. Every modern browser has it's own tag, but does support it. Only IE (of course) doesn't. But with using filters the same thing can be achieved. The only problem with that is, is that IE uses another origin as CSS3 does. My guess is that with some math the origin can be made centered, but I just don't get it (my math isn't what it used to be).

The code and the example can be found here: http://jsbin.com/adiwa3/2. Adding /edit behind the url (http://jsbin.com/adiwa3/2/edit) should open the editor for your testing. Check it in IE to see the problem and in another modern browser to see the needed result.

The part that currently fixes (wrongly) the problem is between the if(i==#){...} which should be changed into some math, as the number of li's can change.

I hope someone can help me with this. Thnx you.

Answer 1

I've found this project for cross browser transforms http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/. Try to analyze the code to understand how it behaves in IE (or directly download the script:)).

Answer 2

Ok, I found the solution. I needed to use the costheta for the left position and the sintheta for the top position and multiply them with the width distance. Summing that up with the height and width, dividing it with 2, gives me the correct value.

that.css({
  left: (cos * dis / 2) - (parseInt(that.width()) / 2),
  top: (sin * dis / 2) - (parseInt(that.height()) / 2)
});

You can find the working code here http://jsbin.com/adiwa3/53 and a working example here http://jeroenvanwarmerdam.nl/contact.aspx