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