CSS3动起来 - 旋转90、180、270度 - 垂直、水平翻转

分类：Html_Css| 发布：佚名| 查看：2749 | 发表时间：2014/11/12

直接上代码，类名字就能说明意思：

1.camnpr-rotate-90 {
2    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
3    -webkit-transform: rotate(90deg);
4    -moz-transform: rotate(90deg);
5    -ms-transform: rotate(90deg);
6    -o-transform: rotate(90deg);
7    transform: rotate(90deg)
8}

效果如下：

1.camnpr-rotate-180 {
2    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
3    -webkit-transform: rotate(180deg);
4    -moz-transform: rotate(180deg);
5    -ms-transform: rotate(180deg);
6    -o-transform: rotate(180deg);
7    transform: rotate(180deg)
8}

效果如下：

1.camnpr-rotate-270 {
2    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
3    -webkit-transform: rotate(270deg);
4    -moz-transform: rotate(270deg);
5    -ms-transform: rotate(270deg);
6    -o-transform: rotate(270deg);
7    transform: rotate(270deg)
8}

效果如下：

1.camnpr-flip-horizontal {
2    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
3    -webkit-transform: scale(-1, 1);
4    -moz-transform: scale(-1, 1);
5    -ms-transform: scale(-1, 1);
6    -o-transform: scale(-1, 1);
7    transform: scale(-1, 1)
8}

效果如下：

1.camnpr-flip-vertical {
2    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
3    -webkit-transform: scale(1, -1);
4    -moz-transform: scale(1, -1);
5    -ms-transform: scale(1, -1);
6    -o-transform: scale(1, -1);
7    transform: scale(1, -1)
8}

效果如下：

以下是让上边的效果动起来，可以自由组合，会出现不同的效果，自己尝试一下吧！

01.camnpr-spin {
02    -webkit-animation: spin 2s infinite linear;
03    -moz-animation: spin 2s infinite linear;
04    -o-animation: spin 2s infinite linear;
05    animation: spin 2s infinite linear
06}
07@-moz-keyframes spin {
08    0% {
09        -moz-transform: rotate(0deg)
10    }
11    100% {
12        -moz-transform: rotate(359deg)
13    }
14}
15@-webkit-keyframes spin {
16    0% {
17       -webkit-transform: rotate(0deg)
18    }
19    100% {
20        -webkit-transform: rotate(359deg)
21    }
22}
23@-o-keyframes spin {
24    0% {
25        -o-transform: rotate(0deg)
26    }
27    100% {
28        -o-transform: rotate(359deg)
29    }
30}
31@keyframes spin {
32    0% {
33        -webkit-transform: rotate(0deg);
34        transform: rotate(0deg)
35   }
36    100% {
37        -webkit-transform: rotate(359deg);
38        transform: rotate(359deg)
39    }
40}