猿吟鹤唳本无意,不知下有行人行

css3中transform兼容ie

(引用QQ图片)

transform:rotate(-30deg);/*兼容性强*/
 -ms-transform:rotate(-30deg);/*ie9*/
 -o-tranform:rotate(-30deg);/*opera*/
 -webkit-transform:rotate(-30deg);/*chrome safria*/
 -moz-transform:rotate(-30deg); /*firefox*/

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  filter : progid:DXImageTransform.Microsoft.Matrix ( enabled=bEnabled , SizingMethod=sMethod , FilterType=sType , Dx=fDx , Dy=fDy , M11=fM11 , M12=fM12 , M21=fM21 , M22=fM22 ) 

Scripting  object.style.filter = "progid:DXImageTransform.Microsoft.Matrix ( sProperties ) " 

说明:

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

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

7. 左右反转。将 M11 和 M12 的值取负。 

8. 上下反转。将 M21 和 M22 的值取负。 

9. 改变尺寸。将 M11 和 M12 和 M21 和 M22 的值乘以相同的因数。对象内容尺寸会按比例增大或缩小。 

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

示例:

#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>
<!–[if IE]>
<style type="text/css">
#example {
 top: 50px;
 left: 50px;
}
</style>
<![endif]–>
</head>
<body>
<div id="ptOfRef"></div>
<div id="example">这是一个CSS旋转属性的演示</div>
</body>
</html>

 

实例二 应用

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>css3属性transform兼容ie</title>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
<style>
body {
 background:url(http://mat1.gtimg.com/edu/2012/tuipu15/top.jpg) top center repeat-x;
}
body {font-size:12px;font: 12px/1.75 "宋体" b8b4f53, sans-serif;}
* { margin:0; padding:0; }
body, button, input, select, textarea { font-family: "宋体","Microsoft YaHei",Tahoma, "SimSun",12px/1.5 tahoma,tahoma,arial ,5b8b4f53; color:#666;}
ul, ol { list-style:none; list-style-type:none }
select, input, img { vertical-align:middle; }
a:link, a:visited { text-decoration:none;color:#333;}
a:hover{color: #307F7A;text-decoration:underline;}
fieldset, img { border:0 none ; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility:hidden; }
.clearfix { display: inline-block; } /* Hides from IE-mac*/
* html .clearfix { height: 1%; }

em{
    font-style:normal;
}
div {display:block;}
.fl{
 float:left;
}
.fr{
 float:right;
}

/******/
.w960-lw {
 width:960px;
 margin:0 auto; 
}

.layout1_lw {
 background:url(http://mat1.gtimg.com/edu/2012/tuipu15/top.jpg) 50% 0 no-repeat;
 height:785px;
 margin:0 auto;
}

.nav_lw {
 position:relative;
 z-index:9;
}
.menu_lw {
 position:absolute;
 top:211px;
 left:-30px;
 float:left;
 -webkit-transform: rotate(-30deg);  
 -moz-transform: rotate(-30deg);
 -o-transform: rotate(-30deg);
 -ms-transform: rotate(-30deg);
 /*filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3.7660444431189777);*/
 
}

.nav_lw  li {
 background:#479E13;
 float:left;
 width:104px;
 font-size:18px;
 font-weight:500;
 color:#fff;
 font-family:"Microsoft YaHei";
 text-align:center;
 /*filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.866025404, M12=0.5, M21=-0.5, M22=0.866025404) 9;*/
}
#nav_lw  li{
 position:absolute 9; 
}
#nav_lw .n1 {
 top:186px 9;
 left:50px 9;
}
#nav_lw .n2 {
 top:135px 9;
 left:138px 9;
}
#nav_lw .n3 {
 top:83px 9;
 left:228px 9;
}
#nav_lw .n4 {
 top:31px 9;
 left:318px 9;
}
#nav_lw .n5 {
 top:-22px 9;
 left:410px 9;
}
#nav_lw .n6 {
 top:-74px 9;
 left:500px 9;
}
#nav_lw .n7 {
 top:-126px 9;
 left:590px 9;
}
#nav_lw .n8 {
 top:-178px 9;
 left:680px 9;
}
#nav_lw .n9{
 top:-230px 9;
 left:770px 9;
}

.nav_lw  li a {
 background:#00aeef;
 color:#fff;
 display:block;
 width:104px;
 height:57px;
 line-height:58px;
 
}
.nav_lw  li a:hover{
 background:#39900B;
 text-decoration:underline;
 }
.nav_lw  li {
 filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.866025404, M12=0.5, M21=-0.5, M22=0.866025404) 9;
 
}/*ie6-ie8  
  *Matrix 滤镜在旋转方面需要用到 M11 M12 M21 M22 四个参数,分别代表 cos(旋转的角度)、-sin(旋转的角度)、sin(旋转的角度)、cos(旋转的角度)。但这里需要注意的是 IE 中旋转的中心点会发生变化。
*/
</style>

</head>
<body>

 

  <div class="layout layout1_lw">
    <div class="nav_lw w960-lw">
   <ul class="menu_lw clearfix" id="nav_lw">
  <li class="n1"><a href="#">消息</a></li>
  <li class="n2"><a href="#">消息</a></li>
  <li class="n4"><a href="#">消息</a></li>
  <li class="n3"><a href="#">消息</a></li>
  <li class="n5"><a href="#">消息</a></li>
  <li class="n6"><a href="#">消息</a></li>
  <li class="n7"><a href="#">消息</a></li>
  <li class="n8"><a href="#">消息</a></li>
  <li class="n9"><a href="#">消息</a></li>
   </ul>
 </div>
  
  </div>
  
  
</body>
</html>

 

发表评论

您的电子邮箱地址不会被公开。