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 }
css翻转
最新推荐文章于 2024-03-03 20:00:31 发布