CSS代码,高级浏览器使用transform,ie用滤镜实现。
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 }
原图
![](https://i-blog.csdnimg.cn/blog_migrate/66edefd89691f9bcb7992af6ad3d7349.jpeg)
水平翻转
![](https://i-blog.csdnimg.cn/blog_migrate/66edefd89691f9bcb7992af6ad3d7349.jpeg)
垂直翻转
![](https://i-blog.csdnimg.cn/blog_migrate/66edefd89691f9bcb7992af6ad3d7349.jpeg)
顺时针90度
![](https://i-blog.csdnimg.cn/blog_migrate/66edefd89691f9bcb7992af6ad3d7349.jpeg)
顺时针180度
![](https://i-blog.csdnimg.cn/blog_migrate/66edefd89691f9bcb7992af6ad3d7349.jpeg)
顺时针270度
![](https://i-blog.csdnimg.cn/blog_migrate/66edefd89691f9bcb7992af6ad3d7349.jpeg)