码迷,mamicode.com
首页 > Web开发 > 详细

CSS旋转&翻转,兼容方案

时间:2016-06-27 19:51:35      阅读:165      评论: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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!