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 right.
99% of articles about using this filter contain something like this.
filter: transformation matrix
left :?
right :?
* 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.
')
I.e
var sizeopt={
w:test.width(),
h:test.height()
};
.....
//
var w=test.width();
var h=test.height();
//
test.css({'margin-left':-Math.round((w-sizeopt.w)/2),'margin-top':-Math.round((h-sizeopt.h)/2)});
Example ,
clean sourceOpen 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