CSS旋转&翻转,兼容方案

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 }
posted @ 2016-06-27 17:33  李清欣  阅读(459)  评论(0编辑  收藏  举报