html水平翻转效果 CSS3样式实现水平和垂直翻转

第一种：随着现代浏览器对CSS3的支持愈发完善，对于实现各个浏览器兼容的元素的水平翻转或是垂直翻转效果也就成为了可能。相关的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;

}

第二种，就目前而言，对于基于webkit核心的浏览器，如Chrome以及Safari，实现元素的垂直翻转或是水平翻转也可以使用如下样式：/*水平翻转*/

.flipx{transform:rotateY(180deg);}

/*垂直翻转*/

.flipy{transform:rotateX(180deg);}

综合比较：第一种兼容性相对要好，建议使用第一种方式；第二种情况在iPhone5会出现兼容问题，可能原因是为部分IOSSafari浏览器不支持rotate。