首页 > 建站教程 > CSS3+HTML5 >  transform兼容ie8的写法正文

transform兼容ie8的写法

我们都知道,transform是css3推出的变形属性,包括斜切、平移、缩放、旋转等,配合css3的动画,可以做出很多炫酷的效果。但是,我爱模板网被客户要求让transform兼容到IE8浏览器。明显的,IE8是不支持css3的,但是IE浏览器都一个filter滤镜,可以实现类似的效果。下面的代码转载自互联网:

transform的ie8写法:
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.866025404, M12=0.5, M21=-0.5, M22=0.866025404) ;

    Matrix 滤镜在旋转方面需要用到 M11 M12 M21 M22 四个参数,分别代表 cos(旋转的角度)、-sin(旋转的角度)、sin(旋转的角度)、cos(旋转的角度)。但这里需要注意的是 IE 中旋转的中心点会发生变化。

    CSS代码:
progid:DXImageTransform.Microsoft.Matrix ( enabled=bEnabled , SizingMethod=sMethod , FilterType=sType , Dx=fDx , Dy=fDy , M11=fM11 , M12=fM12 , M21=fM21 , M22=fM22 ) 

    js代码:
object.style.filter = "progid:DXImageTransform.Microsoft.Matrix ( sProperties ) " 

说明:

    使用矩阵变形实现对象内容的改变尺寸、旋转、上下或左右反转。

    使用此滤镜可以建立下列效果:

        左右反转:将 M11 和 M12 的值取负。
        上下反转:将 M21 和 M22 的值取负。
        改变尺寸:将 M11 和 M12 和 M21 和 M22 的值乘以相同的因数。对象内容尺寸会按比例增大或缩小。

    使用 padding 属性能够使最终图像边角被剪切的机会降到最小。

css案例:
#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.Matrix(enabled='false') ; }
#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.Matrix(M11=1.0, sizingmethod="auto expand"); }

实例:


提示:您可以先修改部分代码再运行