CSS旋转&翻转，兼容方案

CSS代码，高级浏览器使用transform，ie用滤镜实现。

/*水平翻转*/
.flipx {
    -moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
    filter:FlipH();
}
/*垂直翻转*/
.flipy {
    -moz-transform:scaleY(-1);
    -webkit-transform:scaleY(-1);
    -o-transform:scaleY(-1);
    transform:scaleY(-1);
    filter:FlipV();
}
/*顺时针旋转90度*/
.rotate90 {
   filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
   -moz-transform: rotate(90deg);
   -o-transform: rotate(90deg);
   -webkit-transform: rotate(90deg);
   transform: rotate(90deg);
}
/*顺时针旋转180度*/
.rotate180 {
   filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
   -moz-transform: rotate(180deg);
   -o-transform: rotate(180deg);
   -webkit-transform: rotate(180deg);
   transform: rotate(180deg);
}
/*顺时针旋转270度*/
.rotate270 {
   filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
   -moz-transform: rotate(270deg);
   -o-transform: rotate(270deg);
   -webkit-transform: rotate(270deg);
   transform: rotate(270deg);
}

原图

水平翻转

垂直翻转

顺时针90度

顺时针180度

顺时针270度