CSS rotation in IE

Gravity Switch, the company I work for, launched their new website today. I was really pushing as much HTML5/CSS3 as possible in the new site[1]. I even used CSS3 rotation, but as it turned out, IE8 is our biggest browser, and my boss needed these images rotated there. I knew that IE had basic rotation, which does 90°, 180°, & 270° – but I needed 2° & 3°.

Enter the Matrix Filter!

Documentation here, with an example of 60° rotation here. Says it works from IE5.5+, & IE9 supports the CSS3 -ms-transform property. IE10 should just use transform. [source]

Luckily for me, between classes on computer graphics & robotics, I’m pretty familiar with transformation matrices. But if you want to learn more, wikipedia can tell you, and here’s the section on rotation.

You’ll need to know the cos & sin of your desired rotation degree (which does make changing it hard, so figure it out in a CSS3-supporting browser first) – and if you don’t have a calculator, you can just google it. So now that you have these 2 values, plug them into the matrix filter as such:

filter: progid:DXImageTransform.Microsoft.Matrix(M11=cos(θ), M12=-sin(θ), M21=sin(θ), M22=cos(θ), SizingMethod="auto expand");

See it in action

View on jsfiddle.

Screencaps via Adobe Broswerlabs. IE8 is cut off, but clearly rotated.

The CSS looks ‘weird’ here because I use LESS & a mixins file- which gives me shorthands to the CSS rotation & box shadow properties, and variables to hold colors. Now all I need is for it to understand trigonometry, and I could make a shorthand for the matrix too.

What issues did I face?

  • In chrome (at some point – I can’t seem to replicate the issue now – perhaps chrome updated itself), the edges of the element were jagged. This was obvious because the element in question had a white background & was on top of a green container. -webkit-backface-visibility: hidden; seemed to fix that.
  • Then I had the same issue in IE – the top & left sides of the element were not antialiased at all. Adding 2px borders to the top & left that were the same color as the BG (@bg) offset the crunchiness so that it was no longer visible. You don’t see it on the jsFiddle example because it’s white on white, but you can change the BG & see it, and then add your own borders.
  • The box shadow did not come through – as expected – but we needed that kind of separation. I added a light grey (@shadow) border to the bottom & right to fake it.

Browser support?

Grabbed from MDN, CanIUse, & MSDN. In some cases I’m not sure when support started, so it just says ‘yes’.
IE Firefox Chrome Safari Opera iOS Safari Opera Mini Opera Mobile Android Browser
5.5+ 3.5+ Yes 3.1+ 10.5+ 3.2+ No 11+ Yes

[1] I also knew that we would do extensive cross-browser testing & that I could make effective fallbacks once I learned what didn’t work, which let me make the site look awesome in Chrome, and work back from there.

Posted in:



No comments.