IE矩阵滤镜Matrix旋转

SS3 transform与IE filter

 

.trans_skew { transform: skew(35deg); }

.trans_scale { transform:scale(1, 0.5); }

.trans_rotate { transform:rotate(45deg); }

.trans_translate { transform:translate(10px, 20px); }

 

http://www.useragentman.com/IETransformsTranslator/

 

#transformedObject {

     width:             220px;

     height:            220px;

 

     -moz-transform:    rotate(30deg)

                         scale(1.5)

                         translate(30px);

     -o-transform:      rotate(30deg)

                         scale(1.5)

                         translate(30px);

     -webkit-transform: rotate(30deg)

                         scale(1.5)

                         translate(30px);

     transform:         rotate(30deg)

                         scale(1.5)

                         translate(30px);

}

 

   -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.2990381056766576, M12=-0.7500000000000007, M21=0.7500000000000007, M22=1.2990381056766576, SizingMethod='auto expand')";

   

    

   filter: progid:DXImageTransform.Microsoft.Matrix(

            M11=1.2990381056766576,

            M12=-0.7500000000000007,

            M21=0.7500000000000007,

            M22=1.2990381056766576,

            SizingMethod='auto expand');

 

filter:progid:DXImageTransform.Microsoft.Matrix(M11=cos(roation),M12=-sin(roation),M21=sin(roation),M22=cos(roation),SizingMethod='auto expand');

您想要把一个元素只是单纯的旋转135度的话直接就是(cos(135) = -0.707)：

filter:progid:DXImageTransform.Microsoft.Matrix(M11=-0.707,M12=-0.707,M21=0.707,M22=-0.707,SizingMethod='auto expand');}

但是，同时你希望元素还放大两倍，那该怎么办呢，很简单，M11, M12, M21, M22同时乘以2就可以了，也就是：

filter:progid:DXImageTransform.Microsoft.Matrix(M11=-1.414,M12=-1.414,M21=0.1.414,M22=-1.414,SizingMethod='auto expand');}

 

-moz-transform:rotate(-90deg);

-webkit-transform:rotate(-90deg);

 

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 正度用此方法 0 1 2 3  0度 90度 180度 270度

这里，滤镜代码部分，前面长长的大小写错综的部分我们不用管它，看后面的”rotation=3″这是关键，这里的参数可以是0，1，2，3，没有4，要是是4啊，5啊之类的，图片就不旋转了。旋转的角度只要将这些数值乘以90(π/2)就可以了，所以呢”rotation=3″表示顺时针旋转270度，与transform:rotate(270deg);是一个意思。所以，这里，就会有些小小的局限——不能实现任意角度的旋转，只能是90度，180度以及270度。但是，IE浏览器不是个简单的罗罗，要实现任意角度的旋转，它还是有办法的，只是要比上面的麻烦些，难理解些，要用到矩阵变换滤镜。

 

要实现IE下任意角度图片的旋转记住下面的式子就可以了：filter:progid:DXImageTransform.Microsoft.Matrix(M11=cos(roation),M12=-sin(roation),M21=sin(roation),M22=cos(roation),SizingMethod='auto expand');

 

 

.rot1

{

-moz-transform:rotate(90deg);

-webkit-transform:rotate(90deg);

transform:rotate(90deg);

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

}

.rot2

{

-moz-transform:rotate(180deg);

-webkit-transform:rotate(180deg);

transform:rotate(180deg);

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

}

.rot3

{

-moz-transform:rotate(270deg); 

-webkit-transform:rotate(270deg); 

transform:rotate(270deg); 

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

 

#rot90

{

-moz-transform:rotate(90deg); 

-webkit-transform:rotate(90deg); 

transform:rotate(90deg); 

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

}

#rot135

{

-moz-transform:rotate(135deg); 

-webkit-transform:rotate(135deg); 

transform:rotate(135deg); filter:progid:DXImageTransform.Microsoft.Matrix(M11=-0.707,M12=-0.707,M21=0.707,M22=-0.707,SizingMethod='auto expand');

}

 

-webkit-transform-origin: bottom left;

transform: matrix(0.866025,0.500000,-0.500000,0.866025,0,0);

transform: matrix3d(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1)