transform兼容ie8的写法_CSS3教程,CSS3动画教程,HTML5教程,HTML5+教程,HTML5 PLUS教程_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

我们都知道，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"); }

实例：

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>IE浏览器CSS transform旋转属性的演示</title> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> <style type="text/css"> body { font-family: "Arial", sans-serif; } #ptOfRef { border: #000 solid 3px; background: #6FF; width: 204px; height: 204px; position: absolute; top: 100px; left: 100px; } #example { position: absolute; top: 100px; left: 100px; border: #09F solid 1px; background: #F90; font-weight: 900; color: #FFF; padding: 10px; display: block; width: 200px; height: 200px; margin-top: -1px; margin-left: -1px; transform: rotate(40deg); -o-transform: rotate(40deg); -webkit-transform: rotate(40deg); -moz-transform: rotate(40deg); filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398, M22=0.7660444431189779)} </style>  </head> <body> <div id="ptOfRef"></div> <div id="example">这是一个CSS旋转属性的演示</div> </body> </html>
提示：您可以先修改部分代码再运行

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！

transform兼容ie8的写法

猜你喜欢