Geekly Articles each Day

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.

In fact, it is not.

I will not insert kilometers of code here.

Confine myself to the main

1. Calculate the angle

2. Get the transformation matrix

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

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

css property transform: rotate in IE is not available.

But everyone knows that there is a

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 -

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/