首页 > Web开发 > 详细

CSS旋转&翻转,兼容方案

时间:2016-06-27 19:51:10      阅读:205      评论:0      收藏:0      [点我收藏+]

CSS代码,高级浏览器使用transform,ie用滤镜实现。

 转自http://aijuans.iteye.com/blog/1936492
1 /*水平翻转*/ 2 .flipx { 3 -moz-transform:scaleX(-1); 4 -webkit-transform:scaleX(-1); 5 -o-transform:scaleX(-1); 6 transform:scaleX(-1); 7 filter:FlipH(); 8 } 9 /*垂直翻转*/ 10 .flipy { 11 -moz-transform:scaleY(-1); 12 -webkit-transform:scaleY(-1); 13 -o-transform:scaleY(-1); 14 transform:scaleY(-1); 15 filter:FlipV(); 16 } 17 /*顺时针旋转90度*/ 18 .rotate90 { 19 filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 20 -moz-transform: rotate(90deg); 21 -o-transform: rotate(90deg); 22 -webkit-transform: rotate(90deg); 23 transform: rotate(90deg); 24 } 25 /*顺时针旋转180度*/ 26 .rotate180 { 27 filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2); 28 -moz-transform: rotate(180deg); 29 -o-transform: rotate(180deg); 30 -webkit-transform: rotate(180deg); 31 transform: rotate(180deg); 32 } 33 /*顺时针旋转270度*/ 34 .rotate270 { 35 filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 36 -moz-transform: rotate(270deg); 37 -o-transform: rotate(270deg); 38 -webkit-transform: rotate(270deg); 39 transform: rotate(270deg); 40 }

CSS旋转&翻转,兼容方案

原文:http://www.cnblogs.com/xinxin1994/p/5620823.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!