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会出现兼容问题,可能原因是为部分IOS Safari浏览器不支持rotate。

感谢您的支持,我会继续努力的!

扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

标签: 技术教程

作者头像
便宜技术博客创始人

乐享资源记忆点滴的博客,主要分享程序源码!

上一篇:为什么我们与QQ空间渐行渐远了?
下一篇:QQ小程序开发者工具无法编写代码

发表评论