参考资料：
WEB骇客 : http://www.webhek.com/css-flip/
Demo : Demo(谷歌浏览器观看，没做兼容)
Demo截图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{ margin:0;padding:0; font-family: '微软雅黑','宋体'; } @-webkit-keyframes circling{
0% {
-webkit-transform:rotate(-90deg);
}
100% {
-webkit-transform:rotate(270deg);
}
} @-webkit-keyframes circling2{
0% {
-webkit-transform:rotate(-90deg);
}
100% {
-webkit-transform:rotate(-450deg);
}
}
@-webkit-keyframes fast-circling{
0% {
-webkit-transform:rotate(-90deg);
}
100% {
-webkit-transform:rotate(270deg);
}
} @-webkit-keyframes fast-circling2{
0% {
-webkit-transform:rotate(-90deg);
}
100% {
-webkit-transform:rotate(-450deg);
}
} .center{ width:950px; margin:100px auto; }
.cir-main{ position: relative;width:1px;height:1px; margin:300px auto;-webkit-perspective: 1000;}
.circling-1,.circling-2{position: absolute;border-radius: 50%;border:2px solid #e4e4e4; }
.circling-1{ left:-250px;top:-250px;width:500px;height:500px; }
.circling-2{left:-225px;top:-225px; width:450px;height:450px; }
.line-1,.line-2{position: absolute;left:0;top:0;height:1px;transform-origin:left center;
-webkit-transform:rotate(-90deg);
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: linear;
} .line-1{ width:250px;
-webkit-animation-name: circling; } .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; }
.line-2{ width:225px;
-webkit-animation-name: circling2; } .cir-main.cur .line-1,.cir-main.cur .line-2{ -webkit-animation-duration: 1.5s;
-webkit-animation-timing-function: cubic-bezier(0,.62,.24,.88); }
.cir-main.cur .line-1{ -webkit-animation-name: fast-circling; }
.cir-main.cur .line-2{ -webkit-animation-name: fast-circling2; }
.cir-main .paused{
-webkit-animation-play-state:paused;
}
.turn{ position: absolute;left:-150px;top:-150px; width:300px;height:300px; cursor: pointer;transform-style: preserve-3d; transition: 0.6s;}
.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;}
.on{ background-color: rgba(232,243,247,1);color: #333; z-index: 2; -webkit-transform: rotateY(0deg);}
.off{ background-color: rgba(244,163,176,1);color: #fff;transform: rotateY(-180deg); }
.turn.cur .on{ transform: rotateY(180deg); }
.turn.cur .off{ transform: rotateY(0deg); } </style>
<script>
window.onload = function(){ var oMain = document.querySelector('.cir-main');
var oTurn = document.querySelector('.turn');
var oline1 = document.querySelector('.line-1');
var oline2 = document.querySelector('.line-2'); var timer = null;
var btn = false; oTurn.onclick = function(){ clearTimeout( timer ); if( btn ){ this.className = 'turn'; oMain.className = 'cir-main'; }else{ clearTimeout( timer ); this.className = 'turn cur'; } oMain.className = 'cir-main cur'; timer = setTimeout(function(){ oMain.className = 'cir-main'; clearTimeout( timer ); },1500); btn = !btn; } }
</script>
</head>
<body>
<div class="center"> <div class="cir-main">
<div class="circling-1" ></div>
<div class="circling-2"></div>
<div class="line-1"></div>
<div class="line-2"></div>
<div class="turn">
<div class="on">
点击开启
</div>
<div class="off">
点击关闭
</div>
</div>
</div>
</div>
</body>
</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否则不生效;;