📜 ⬆️ ⬇️

css Rotate. Possible in IE

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

Source: https://habr.com/ru/post/107183/


All Articles