旋轉(zhuǎn)一個(gè)元素算是一個(gè)比較常見的需求了吧，在支持CSS3的瀏覽器中可以使用transform很容易地實(shí)現(xiàn)，這里有介紹：http://www.css88.com/archives/2168，這里有演示http://www.css88.com/tool/css3Preview/Transform.html，就不再介紹了。

在IE下旋轉(zhuǎn)一個(gè)元素，則只能靠濾鏡了。

如果只是以90度為單位旋轉(zhuǎn)的話，簡單地使用這個(gè)濾鏡就好：

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=i)

其中i取0，1，2，3，分別代表旋轉(zhuǎn)90度、180度、270度、360度。

而如果要實(shí)現(xiàn)任意角度旋轉(zhuǎn)，則要使用Matrix（矩陣）濾鏡。

網(wǎng)上介紹的方法都是這樣：

filter:progid:DXImageTransform.Microsoft.Matrix(M11=m11,M12=m12,M21=m21,M22=m22,sizingMethod="auto expand");

設(shè)旋轉(zhuǎn)角為x，用弧度表示。那么m11=cos(x),m12=-sin(x),m21=sin(x),m22=cos(x)

正弦sin的誘導(dǎo)公式（對(duì)邊比斜邊）

sin(2kπ+α)=sin α?
sin(π/2-α)=cos α
sin(π/2+α)=cos α?
sin(-α)=-sin α
sin(π+α)=-sin α?
sin(π-α)=sin α

余弦cos的誘導(dǎo)公式（鄰邊比斜邊）

cos(2kπ+α)=cos α?
cos(π/2-α)=sin α?
cos(π/2+α)=-sin α
cos(-α)=cos α
cos(π+α)=-cos α?
cos(π-α)=-cos α

實(shí)測(cè)這個(gè)方法有效，但是它會(huì)繞元素原來輪廓的左邊和上邊轉(zhuǎn)動(dòng)，還是畫個(gè)圖示意一下：

如圖所示，圖形會(huì)貼著上邊和左邊旋轉(zhuǎn)。

那如果我們要繞中間點(diǎn)旋轉(zhuǎn)的話要怎么做呢？這就說來話長了，得講到幾何的向量方法。

坐標(biāo)系中，每個(gè)點(diǎn)有一個(gè)坐標(biāo)，比如點(diǎn)p(3,4)，橫坐標(biāo)為3，縱坐標(biāo)為4。

接下來，向量：簡單理解為有方向的線段。

將點(diǎn)和原點(diǎn)連接起來，方向從原點(diǎn)指向點(diǎn)，即構(gòu)成一個(gè)向量op。

通過這樣的方式，我們就將向量與點(diǎn)一一映射起來了，研究點(diǎn)的時(shí)候就可以用向量來研究啦。

?

接下來，研究旋轉(zhuǎn)的實(shí)質(zhì)，P點(diǎn)繞原點(diǎn)O（順時(shí)針）旋轉(zhuǎn)角度α，即向量OP旋轉(zhuǎn)α，新的點(diǎn)P‘坐標(biāo)變?yōu)?3cosα-4sinα,4sinα+3cosα).

為什么會(huì)是這個(gè)值，

?被旋轉(zhuǎn)了??并希望知道旋轉(zhuǎn)后的坐標(biāo)?:

或

請(qǐng)參閱http://zh.wikipedia.org/wiki/%E6%97%8B%E8%BD%AC（數(shù)學(xué)里面以逆時(shí)針為正方向，所以公式在符號(hào)上略有不同）

上面新坐標(biāo)中，在原坐標(biāo)上進(jìn)行的計(jì)算的數(shù)cosα,-sinα,sinα,cosα剛好就是上上面IE的matrix中的參數(shù)m11,m12,m21,m22！

事實(shí)上，上面的計(jì)算一般會(huì)寫成矩陣的方式來進(jìn)行，見維基百科的表示方法。

所以，matrix濾鏡的實(shí)質(zhì)是對(duì)圖形進(jìn)行坐標(biāo)的矩陣運(yùn)算。

上面說的是繞原點(diǎn)O旋轉(zhuǎn)，如果繞的是非原點(diǎn)呢？情況比較復(fù)雜，詳見http://hi.baidu.com/windsion/blog/item/b4a41951699aa0c9b645ae4f.html。

大致分為三步：

1. 整體位移，即把中心點(diǎn)和向量做相應(yīng)位移，使旋轉(zhuǎn)點(diǎn)變?yōu)樵c(diǎn)
2. 繞原點(diǎn)旋轉(zhuǎn)，和上面說的一樣
3. 整體位移，再將中心點(diǎn)移回原來的地方去

這個(gè)時(shí)候，計(jì)算的矩陣就變得復(fù)雜了（上面文章的最下方）。

而事實(shí)上，這個(gè)矩陣是可以化簡的，詳見這里http://stackoverflow.com/questions/5051451/javascript-ie-rotation-transform-maths

最終，我們得到除了上面的m11,m12,m21,m22之外的另外兩個(gè)數(shù)，這兩個(gè)數(shù)在IE的matrix濾鏡中表示為Dx,Dy。

將這六個(gè)參數(shù)寫入matrix濾鏡，即可繞中心點(diǎn)旋轉(zhuǎn)了。

完整的寫法：

progid:DXImageTransform.Microsoft.Matrix(Dx=dx,Dy=dy,M11=m11,M12=m12,M21=m21,M22=m22);

其中

dx=-width/2*cosdeg+height/2*sindeg+width/2, dy=-width/2*sindeg-height/2*cosdeg+height/2 m11,m12,m21,m22與前面說的一樣。

哦哦，對(duì)了，微軟官方說了http://msdn.microsoft.com/en-us/library/ms532872(v=vs.85).aspx，如果sizingMethod=”auto expand”，那么Dx、Dy是無效的哦。所以去掉就好啦。

最后的最后，sizingMethod是什么意思呢，如果不設(shè)它的話，旋轉(zhuǎn)對(duì)象的容器大小會(huì)是固定的，所以可能有遮擋的情況，自己要調(diào)整好大小，而如果它被設(shè)為auto expand，就是自動(dòng)擴(kuò)展的意思，即旋轉(zhuǎn)時(shí)外面的容器大小會(huì)自動(dòng)調(diào)整，以便不遮擋正在旋轉(zhuǎn)的元素。

轉(zhuǎn)載于:https://www.cnblogs.com/zhishaofei/p/4420571.html

總結(jié)

以上是生活随笔為你收集整理的ie旋转滤镜Matrix的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。