css3 翻转

参考资料：

　　WEB骇客  :  http://www.webhek.com/css-flip/

 

Demo : Demo (谷歌浏览器观看，没做兼容)

Demo截图：

代码：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <style>
  7     *{ margin:0;padding:0; font-family: '微软雅黑','宋体'; }
  8     
  9     @-webkit-keyframes circling{
 10         0% {
 11             -webkit-transform:rotate(-90deg);
 12         }
 13         100% {
 14             -webkit-transform:rotate(270deg);
 15         }
 16     }    
 17 
 18     @-webkit-keyframes circling2{
 19         0% {
 20             -webkit-transform:rotate(-90deg);
 21         }
 22         100% {
 23             -webkit-transform:rotate(-450deg);
 24         }
 25     }    
 26     @-webkit-keyframes fast-circling{
 27         0% {
 28             -webkit-transform:rotate(-90deg);
 29         }
 30         100% {
 31             -webkit-transform:rotate(270deg);
 32         }
 33     }    
 34 
 35     @-webkit-keyframes fast-circling2{
 36         0% {
 37             -webkit-transform:rotate(-90deg);
 38         }
 39         100% {
 40             -webkit-transform:rotate(-450deg);
 41         }
 42     }    
 43 
 44     .center{ width:950px; margin:100px auto;  }  
 45     .cir-main{ position: relative;width:1px;height:1px; margin:300px auto;-webkit-perspective: 1000;}
 46     .circling-1,.circling-2{position: absolute;border-radius: 50%;border:2px solid #e4e4e4; }
 47     .circling-1{ left:-250px;top:-250px;width:500px;height:500px; }
 48     .circling-2{left:-225px;top:-225px; width:450px;height:450px; }
 49     .line-1,.line-2{position: absolute;left:0;top:0;height:1px;transform-origin:left center;    
 50         -webkit-transform:rotate(-90deg);
 51         -webkit-animation-iteration-count: infinite;
 52         -webkit-animation-direction: normal;
 53         -webkit-animation-duration: 10s; 
 54          -webkit-animation-timing-function: linear;
 55     }
 56 
 57     .line-1{ 
 58 
 59         width:250px;
 60         -webkit-animation-name: circling;
 61         
 62     }
 63 
 64     .line-1:after,.line-2:after{ content:""; position: absolute;right:-12px;top:0; margin:-9px 0 0 0; display: block; width:20px;height:20px; background-color: #7acfe7; border-radius: 50%;opacity: 0.8; }
 65     .line-2{ 
 66 
 67         width:225px; 
 68         -webkit-animation-name: circling2;
 69      
 70     }
 71     
 72     .cir-main.cur .line-1,.cir-main.cur .line-2{
 73 
 74         -webkit-animation-duration: 1.5s; 
 75         -webkit-animation-timing-function: cubic-bezier(0,.62,.24,.88);  
 76 
 77     }
 78     .cir-main.cur .line-1{
 79 
 80         -webkit-animation-name: fast-circling;
 81        
 82     }
 83     .cir-main.cur .line-2{
 84 
 85         -webkit-animation-name: fast-circling2;
 86         
 87     }
 88     .cir-main .paused{
 89         -webkit-animation-play-state:paused;
 90     }
 91     .turn{ position: absolute;left:-150px;top:-150px; width:300px;height:300px; cursor: pointer;transform-style: preserve-3d; transition: 0.6s;}
 92     .on,.off{position: absolute; width:300px;height:300px;border-radius: 50%;border:1px solid #e4e4e4; text-align:center; line-height: 300px; font-size: 30px; transform-origin:center center;transition: 0.6s;transform-style: preserve-3d;backface-visibility: hidden;}
 93     .on{  background-color: rgba(232,243,247,1);color: #333; z-index: 2; -webkit-transform: rotateY(0deg);}
 94     .off{  background-color: rgba(244,163,176,1);color: #fff;transform: rotateY(-180deg); }
 95    .turn.cur .on{ transform: rotateY(180deg); }
 96    .turn.cur .off{ transform: rotateY(0deg); }
 97 
 98     </style>
 99     <script>
100     window.onload = function(){
101 
102         var oMain = document.querySelector('.cir-main');
103         var oTurn = document.querySelector('.turn');
104         var oline1 = document.querySelector('.line-1');
105         var oline2 = document.querySelector('.line-2');
106 
107         var timer = null;
108         var btn = false;
109 
110         oTurn.onclick = function(){
111 
112             clearTimeout( timer );
113 
114             if( btn ){
115                 
116 
117                 this.className = 'turn';
118 
119                 oMain.className = 'cir-main';
120 
121             }else{
122 
123                 clearTimeout( timer );
124 
125                 this.className = 'turn cur';
126 
127             }
128 
129             oMain.className = 'cir-main cur';
130 
131             timer = setTimeout(function(){
132 
133                 oMain.className = 'cir-main';
134                 
135                 clearTimeout( timer );
136                 
137             },1500);
138 
139             btn = !btn;
140 
141         }
142 
143     }
144     </script>
145 </head>
146 <body>
147     <div class="center">
148 
149         <div class="cir-main">
150             <div class="circling-1" ></div>
151             <div class="circling-2"></div>
152             <div class="line-1"></div>
153             <div class="line-2"></div>
154             <div class="turn">
155                  <div class="on">
156                     点击开启
157                 </div> 
158                 <div class="off">
159                     点击关闭
160                 </div>
161             </div>
162         </div>
163     </div>
164 </body>
165 </html>
View Code

 

后记：

1.上下翻转是 X轴翻转(rotateX),左右翻转是Y轴翻转(rotateY);

2.backface-visibility: hidden;背面的隐藏;

3.圆点其实没有动是长方形的div rotate 做的;

4.重点：

　　如果想动态更改 animation-duration 的完成速度时间 有两个方法：

　　一、给旋转的对象换不同的class 更改 animation并且animation-name必须赋一个新的keyframes 否则不生效;

　　二、JS 修改 animation-duration、animation-name 两个值必须同时修改 并且 animation-name 必须赋一个新的keyframes否则不生效;;

 

posted @ 2015-08-24 14:09  uustoboy  阅读(398)  评论(0)  编辑  收藏  举报