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。

CSS3样式实现水平和垂直翻转  技术教程 第1张

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

CSS3样式实现水平和垂直翻转  技术教程 第2张
扫码打赏,你说多少就多少

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

标签: 技术教程

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

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

  • 我是一个热爱钻研计算机技术的青少年,从小开始对计算机有极大的兴趣。目前我专注网站开发领域。我还自己发起建立了一个制作游戏的团队,希望能和大家合作,一同创造出属于我们自己的作品!
  • 版权声明:本站文章如无特别标注,均为本站原创文章,于2020-01-19,由便宜技术博客发表,共 1014个字。
  • 转载请注明出处:便宜技术博客,如有疑问,请联系我们
  • 本文地址:https://www.aswpay.cn/bbs/?id=182
上一篇:为什么我们与QQ空间渐行渐远了?
下一篇:QQ小程序开发者工具无法编写代码

发表评论