参考资料：
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>
后记：
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否则不生效;;