CSS旋转&翻转，兼容方案

 

 

 

        /*水平翻转*/
        .flipx {
            -moz-transform:scaleX(-1);
            -webkit-transform:scaleX(-1);
            -o-transform:scaleX(-1);
            -ms-transform:scaleX(-1);
            transform:scaleX(-1);
            filter:FlipH();
        }
        /*垂直翻转*/
        .flipy {
            -moz-transform:scaleY(-1);
            -webkit-transform:scaleY(-1);
            -o-transform:scaleY(-1);
            -ms-transform:scaleY(-1);
            transform:scaleY(-1);
            filter:FlipV();
        }
        /*顺时针旋转90度*/
        .rotate90 {
            filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
            -webkit-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            transform: rotate(90deg);
        }
        /*顺时针旋转180度*/
        .rotate180 {
            filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
            -moz-transform: rotate(180deg);
            -o-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
        }
        /*顺时针旋转270度*/
        .rotate270 {
            filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
            -moz-transform: rotate(270deg);
            -o-transform: rotate(270deg);
            -ms-transform: rotate(270deg);
            -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
        }

 

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

ps:据说IE8浏览器（在非标准模式下），在CSS中，要使用“-ms-filter”代替“filter”。

先上实例代码，以下代码将实现图片顺指针旋转60度的效果：

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

我们要关注的其实就只是这一部分：”M11=0.5,M12=-0.866,M21=0.866,M22=0.5″，有人可能会问，这里的几个数值是怎么来的，答案很简单 – “计算来的”。假设我们要旋转的角度是rotation，则计算过程如下：

sin = sin(roation);cos = cos(roation);
M11 = cos;M12 = -sin;M21 = sin;M22 = cos;

例如这里要旋转60度，即rotation=60，所以sin = sin(60) = 0.866, cos = cos(60) = 0.5，于是就有了”M11=0.5,M12=-0.866,M21=0.866,M22=0.5″。所以呢，要实现IE下任意角度图片的旋转记住下面的式子就可以了：filter:progid:DXImageTransform.Microsoft.Matrix(M11=cos(roation),M12=-sin(roation),M21=sin(roation),M22=cos(roation),SizingMethod='auto expand');

这个矩阵滤镜还可以实现进行缩放，对此不详述。