怎样用CSS实现图片翻转

html-css011

怎样用CSS实现图片翻转,第1张

以实现一张图片双面翻转为例：

方法一：

1、实现CSS样式的方法代码如下。

2、实现前端布局的方法代码如下。

3、实现图片翻转CSS样式代码如下。

方法二：

1、实现正反面效果的HTML的方法代码如下。

2、实现CSS样式的方法代码。

3、然后实现竖向翻转的方法代码如下。

在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

以上是常用的参数，但是平时用的最多的参数有这几个。