transform兼容ie8

最新推荐文章于 2025-05-27 16:38:22 发布

Daisukes

最新推荐文章于 2025-05-27 16:38:22 发布

阅读量2.0w

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Hack 兼容问题文章标签：兼容问题

本文链接：https://blog.youkuaiyun.com/Daisukes/article/details/53171319

兼容问题同时被 2 个专栏收录

8 篇文章

订阅专栏

Hack

3 篇文章

订阅专栏

这篇博客介绍了如何在IE8中实现CSS transform的旋转效果。通过使用filter: progid:DXImageTransform.Microsoft.Matrix()滤镜，设置M11, M12, M21, M22等参数来模拟旋转，同时提到了处理旋转中心点变化的问题和矩阵变形的其他应用，如尺寸改变和翻转效果。示例代码展示了如何在不同浏览器中保持元素旋转的一致性。" 81061983,7612983,gensim LDA模型中的困惑度(perplexity)解析与计算,"['自然语言处理', '机器学习', '主题模型', 'Python']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

其他浏览器正常写法：

transform:rotate(-30deg);
-ms-transform:rotate(-30deg);
-o-tranform:rotate(-30deg);
-webkit-transform:rotate(-30deg);
-moz-transform:rotate(-30deg);

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 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>