css怎样解决ie浏览器旋转不兼容

html-css0121

css怎样解决ie浏览器旋转不兼容,第1张

在现代浏览器中使用CSS3的transform样式即可轻松搞定,但是对于国内IE浏览器(特别是7,8)还占有较大份额的情况下,兼容性还是必须要考虑的,所以也特意记录下IE旋转滤镜的使用。

在IE下的旋转滤镜有两种:

第一种:

CSS样式

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation:1)

其中rotation属性只有四个值:0,1,2,3 分别表示的旋转度数是:0度,90度,180度,270度。查看参考文档,请点击这里,但是想要旋转其他任意度数上面的方法就不适合了,这就需要下面的方法。

第二种

CSS样式

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

enabled:定义滤镜是否被禁止使用,取值范围为布尔值,当取值为true的时候滤镜可用;取值为false时,禁止使用滤镜。

SizingMethod:定义元素使用图片时是否改变属性。当取值为clip to original时,元素不改变尺寸;当取值为auto expand时,元素改变尺寸。

FilterType:定义元素旋转的方法。当取值为bilinear时,使用平滑、静态的显示效果;nearest neighhbor一般用于动态滤镜中。

Dx:定义水平方向上的向量增加量。使用浮点数定义增量的大小,默认值为1.0。

Dy:定义垂直方向上的向量增加量。使用浮点数定义增量的大小,默认值为1.0。

M11:定义元素右侧边线水平方向上的显示位置。使用浮点数定义增量的大小,默认值为1.0。当取值大于1.0时,右边线向右移动,同时拉伸元素的宽度;当取值小于1.0时,右边线向左移动,同时减小元素的宽度。

M12:定义元素底侧边线水平方向上的显示位置。使用浮点数定义增量的大小,默认值为0时。当取值大于0时,底部连线向右移动,同时拉伸元素的宽度;当取值小于0时,底部边线向左移动,同时拉伸元素的宽度。

M21:定义元素右侧边线竖直方向上的显示位置。使用浮点数定义增量的大小,默认值为0。当取值大于0时,底部边线向下移动,同时拉伸元素的高度;当取值小于0时,底部边线向上移动,同时拉伸元素的高度。

M22:定义元素底侧边线竖直方向上的显示位置。使用浮点数定义增量的大小,默认值为1.0。当取值大于1.0时,底部边线向下移,同时拉伸元素的高度;当取值小于1.0时,右边线向上移动,同时减小元素的高度。

以上是此滤镜全部的参数,但是平时用的最多的参数只有5个,所以可以简化为:

CSS样式

filter:progid:DXImageTransform.Microsoft.Matrix(SizingMethod=sMethod ,M11=fM11 ,M12=fM12 ,M21=fM21 ,M22=fM22)

SizingMethod一般选择“auto expand”,它和“clip to original”值的区别如下图(图中旋转角度都为45度):

下面来说下如何计算旋转值,也就是如何计算M11,M12,M21,M22的值。

其实也很简单,用计算器算即可,如果你要做旋转动画,那么需要JS去计算,M11=cos(角度值),M12=-sin(角度

值),M21=sin(角度值),M22=cos(角度值)。例如:你想要旋转10度,那么sin(10)约=0.174,cos(10)

约=0.985,所以四个值相应为:M11=0.985,M12=-0.174,M21=0.174,M22=0.985

在这里也想提下,IE Matrix滤镜还可以实现放大和缩小的效果,类似于zoom样式,只要将M11,M12,M21,M22的值乘以相应的倍数即可。

Ps:在IE6和IE7中如果将滤镜写在<style>标签或者样式表中,会出现以下两个问题,

此滤镜之后的样式都会失效;

旋转滤镜一个页面中只允许有一个。

这两点的解决方案是:将滤镜样式直接内嵌在元素标签上。

如果有更好的解决方法可以留言。想了解更多Matrix滤镜,请猛戳这里和这里

这样配合CSS3样式transform即可兼容所有浏览器实现旋转效果。

div

{

backface-visibility:hidden

-webkit-backface-visibility:hidden /* Chrome 和 Safari */

-moz-backface-visibility:hidden /* Firefox */

-ms-backface-visibility:hidden /* Internet Explorer */

}

楼主可以试试这个,隐藏被旋转的 div 元素的背面

"推荐你个系列的教程吧--《Buid New World》第十一集:使用 CSS 增加过渡和其他效果 平移translate,将元素平行移动,参数中分别指定水平方向上的移动距离与垂直方向上的移动距离。

旋转,rotate允许你通过传一个角度值来旋转一个元素。

如果设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。

倾斜,skew可以将一个对象围绕着x和y轴按照一定的角度倾斜,在参数中分别指定水平方向上的倾斜角度与垂直方向上的倾斜角度。

"