学步园

css3实现图片旋转

transform属性有很多用法，其中一个就是translate(旋转)。translate就是基于角度转动一个对象并可用于内联元素和块级元素，它可以实现很酷的效果。

淘宝网使用css3和HTML5已经很长时间了,淘宝的这个图标旋转好像只支持webkit内核的浏览器，其实IE下用滤镜也可以实现。

img{
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

请注意在IE8中(非标准模式)它需要你写成“-ms-filter”而不是“filter”。

浏览器支持

浏览器对translate的支持令人惊奇的广泛。在上面的CSS片段中，我们直接加上-webkit-和-moz-前缀然后将#nav元素旋转-90度。

相当简单吧？唯一的问题是对于一个相当重要的设计元素，如果IE不支持，很多设计师就会不情愿使用它。

幸运的是，IE有这方面的滤镜:图形旋转滤镜。它可以有4个旋转值：0, 1, 2,和3。你将不会获得和Webkit和Gecko一样的精密控制，但是至少在一定程度上保持统一(甚至IE6)。虽然这个滤镜只支持4个值，显得有些鸡肋，但是对于IE来说，聊胜于无吧。

另外，非常值得一提的是，Opera在前几天发布了Opera 10.50 pre版本，声称支持CSS3 的transition和transform。只是还是需要使用私有属性，也就是要使用前缀 -o-

DEMO见本站右侧的微博小图标

 

/*水平翻转*/
.flipx {
    -moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
    /*IE*/
    filter:FlipH;
}

/*垂直翻转*/
.flipy {
    -moz-transform:scaleY(-1);
    -webkit-transform:scaleY(-1);
    -o-transform:scaleY(-1);
    transform:scaleY(-1);
    /*IE*/
    filter:FlipV;
}