I'll be brief.
css property transform: rotate in IE is not available.
But everyone knows that there is a progid
filter : DXImageTransform.Microsoft.Matrix
, which of course rotates the image. But let's say not quite
99% of articles about using this filter contain something like this.
filter: transformation matrix
* ps: left and right are empirically
In fact, it is not.
I will not insert kilometers of code here.
Confine myself to the main
1. Calculate the angle
var rad = (angle * Math.PI) / 180.0;
cos = Math.cos(rad),
sin = Math.sin(rad);
2. Get the transformation matrix
var filter='progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand", M11 = ' + cos + ', M12 = ' + (-sin) + ', M21 = ' + sin + ', M22 = ' + cos + ')';
3. At this point we will get a specific mix of X and Y.
You can of course carry out the simplest matrix operations and get this most desired offset, but in fact - it can be even easier
(I think that the matrices have all been forgotten for a long time)
At the very beginning, you need to remember the dimensions of the element.
And after the turn - to shift it to the delta of the current size compared to the original, divide by two.
, clean source
Open examples NOT in IE - it makes no sense.
For lovers of the perfect - there is a more canonical solution, including the ability to control the rotation through css - css Sandpaper
- there you can find both classical mathematics and various workaround of wrappers around spinning elements. But there is a lot of code. Personally, for my tasks too much.
PS: life is beautiful, if not cool