css3中transform兼容ie 倾斜div

我就是我 2022-08-25 09:12 190阅读 0赞

（引用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>  
  
</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][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][http_mat1.gtimg.com_edu_2012_tuipu15_top.jpg]) top center repeat-x;  
\}  
body \{font-size:12px;font: 12px/1.75 "宋体" b8b\\4f53, sans-serif;\}  
\* \{ margin:0; padding:0; \}  
body, button, input, select, textarea \{ font-family: "宋体","Microsoft YaHei",Tahoma, "SimSun",12px/1.5 tahoma,tahoma,arial ,\\5b8b\\4f53; 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][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>

[http_www.w3.org_TR_html4_loose.dtd]: http://www.w3.org/TR/html4/loose.dtd
[http_mat1.gtimg.com_edu_2012_tuipu15_top.jpg]: http://mat1.gtimg.com/edu/2012/tuipu15/top.jpg