I had the problem that I needed to create a diagonally navigation for a customer. Working with css-transform and
rotate should solve such layouts, but what about the internet explorer? The IE can handle rotation too, by using filter.
The filter called BasicImage
offers the ability to rotate any element that has layout, but the filter can accept only one of four values: 0, 1, 2, or 3
which will rotate the element 0, 90, 180 or 270 degress respectively. Not what I needed. Then there is the
matrix filter - which provides exactly
what I was looking for, rotating an element by any possible degree. But setting up such a matrix is - well let's say a bit uncomfortable. To rotate
an element by 2 degrees you would need the following css syntax: filter:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=0.9993908270190958,M12=-0.034899496702500823,M21=0.034899496702500823,M22=0.9993908270190958);.
Pretty neat, isn't? In case you want to understand the math behind it, take a look at this Wikipedia article.
At the end I decided to let a script do this for me:
rotate(45deg);,
and click The Rotate button. You will receive the cross browser css code
and the visual effect (if working) is adapted to this element.
Found any bugs or strange behaviour? What do you think about it? Please leave a comment in the related article.