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度