JavaScript IE旋转变换数学 [英] JavaScript IE rotation transform maths

问题描述

我正在使用JavaScript设置元素的旋转，我知道如果要设置为90度角很容易实现，但这不是我想要的.因为我想设置为20度之类的奇怪角度，所以我需要使用变换滤镜.我知道它的布局，但是我想知道如何计算这四个值，一开始我尝试了这个.

I am working on setting the rotation of an element with JavaScript, I know this is easy to achieve if you want to set to a 90 degree angle but this is not what I want. Because I want to set to strange angles such as 20 degrees I need to use the transform filter. I know the layout of this but I was wondering how I calculate the four values, at first I tried this.

calSin = Math.sin(parseInt(css[c]));
calCos = Math.cos(parseInt(css[c]));
element.style.filter = 'progid:DXImageTransform.Microsoft.Matrix(M11=' + calCos + ', M12=-' + calSin + ',M21=' + calSin + ', M22=' + calCos + ', sizingMethod="auto expand")';

但是，正如您所看到的那样，这永远都行不通，我只是在黑暗中刺了一下.由于数学不是我的强项，我想知道是否有人可以帮助我计算这些值?

But as you can see, this was never going to work, I was just taking a stab in the dark. Due to maths not being my strong point I was wondering if anyone could help me calculate the values?

谢谢.

编辑

好吧！使用以下代码进行了操作.

Okay! Got it working with the following code.

radians = parseInt(css[c]) * Math.PI * 2 / 360;
calSin = Math.sin(radians);
calCos = Math.cos(radians);
element.style.filter = 'progid:DXImageTransform.Microsoft.Matrix(M11=' + calCos + ', M12=-' + calSin + ',M21=' + calSin + ', M22=' + calCos + ', sizingMethod="auto expand")';

但是现在的问题是，如何使它从中心而不是左上方旋转?

But now the question is how do I make it rotate from the center rather than top left?

推荐答案

要从中心旋转，您需要将Dx和Dy添加到IE过滤器，然后通过 css添加位移并添加CSS hacks以增加IE中元素的宽度和高度.

For rotate from the center, you'll need to add Dx and Dy to IE filter, then add displacement via css and add css hacks to increase elements' width and height in IE.

您可能会在我的网站上看到它们的组合方式: http://kirilloid.ru/

You may look how it's combined on my site: http://kirilloid.ru/

实际上，这是与CSS有关的问题，而不是与JavaScript有关的问题.

Actually this is more CSS-related question, than javascript.

这篇关于JavaScript IE旋转变换数学的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！