随着现代浏览器对CSS3的支持愈发完善，对于实现各个浏览器兼容的元素的水平翻转或是垂直翻转效果也就成为了可能。相关的CSS代码如下：
一、CSS下兼容性的元素水平/垂直翻转实现
/*水平翻转*/
.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;
}
/*水平翻转*/
.flipx { transform: rotateY(180deg); }
/*垂直翻转*/
.flipy { transform: rotateX(180deg); }
-
水平翻转或垂直翻转不同于旋转180度。前者以轴为镜像，后者以点为镜像。
-
如果是对称元素，旋转180度和翻转的显示效果基本上就是一致的，但是，非对称元素就会看到明显差异。
-
对于后面提到的目前仅webkit核心浏览器支持的rotateY(180deg)，这里有个大写的Y。我们都知道Y表示纵轴，所以我们可能会误以为这里实现的是垂直翻转，其实非也，这里的Y表示元素以纵轴为镜像翻转，也就是水平翻转了。
二、水平翻转图片重用应用实例
三、水平翻转元素重用应用实例
原文:www.zhangxiyu
服务热线 19970861797
