参考资料：

　　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否则不生效;;

css3 翻转的更多相关文章

  1. css3 翻转和旋转的区别

    我以前一直以为旋转跟翻转一样,今日自己旋转了好久都发觉跟翻转差一点点,纠结了十几分钟才明白,只能怪自己的立体感太差了. css3中的transform中有旋转,放缩,倾斜,平移的功能,分别对应的属性是 ...

  2. css3 翻转和旋转的差别

    我曾经一直以为旋转跟翻转一样,今日自己旋转了好久都发觉跟翻转差一点点,纠结了十几分钟才明确,仅仅能怪自己的立体感太差了. css3中的transform中有旋转,放缩,倾斜,平移的功能,分别相应的属性 ...

  3. CSS3翻转特效；

    CSS代码: *{padding: 0;margin: 0;} .container{width: 90%;padding: 5%;height: 12rem;display: flex;justif ...

  4. CSS3图片翻转切换案例及其中重要属性解析

    图片翻转切换,在不使用CSS3的情况下,一般都是使用JS实现动画,同时操作元素的width和left,或者height和top以模拟翻转的效果,并在适当时候改变src或者z-index实现图片切换. ...

  5. 简单几步用纯CSS3实现3D翻转效果

    作为前端开发人员的必修课,CSS3翻转能带我们完成许多基本动效,本期我们将用CSS3实现hover翻转效果~ 第一步非常简单,我们简单画1个演示方块,为其 添加transition和transform ...

  6. CSS翻转小效果

    CSS3翻转显示另外一张图: 1.backface-visibility:hidden;背面不可见 2.transform:rotate();旋转 (可以把图片换成本地图片看一下效果) <!DO ...

  7. js,jquery,css,html5特效

    包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...

  8. css动画属性性能

    性能主要表现:流量.功耗与流畅度 在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. ...

  9. JavaScript碎片—函数闭包（模拟面向对象）

    经过这几天的博客浏览,让我见识大涨,其中有一篇让我感触犹深,JavaScript语言本身是没有面向对象的,但是那些大神们却深深的模拟出来了面向对象,让我震撼不已.本篇博客就是在此基础上加上自己的认知, ...

随机推荐

  1. [leetcode-117]填充每个节点的下一个右侧节点指针 II

    (1 AC) 填充每个节点的下一个右侧节点指针 I是完美二叉树.这个是任意二叉树 给定一个二叉树 struct Node { int val; Node *left; Node *right; Nod ...

  2. 【c++】编译器为我们实现了几个类成员函数？

    #include <cassert> #include <complex> #include <iostream> class Empty{}; Empty e; ...

  3. zookeeper安装使用及工作原理分析

    1. Zookeeper概念简介 Zookeeper是一个分布式协调服务:就是为用户的分布式应用程序提供协调服务,它是集群的管理者,监视着集群中各个节点的状态,根据节点提交的反馈进行下一步合理操作. ...

  4. 使用Calender类获取系统时间和时间和运算

    使用Calender类获取系统时间和时间和运算: @Test public void testCal(){ //使用Calender对象获取时间,并对时间进行计算: Calendar instance ...

  5. UDF简记

    摘要: 1.开发UDF 2.开发UDAF 3.开发UDTF 4.部署与测试 5.一个简单的实例 内容:1.开发UDF 函数类需要继承org.apache.hadoop.hive.ql.UDF 实现ev ...

  6. 使用js修改url地址参数

    该方法可以修改url的参数. 例如将 www.baidu.com 修改为 www.baidu.com?name=123 操作为: window.location.href = changeURLArg ...

  7. IDAPython教程（三）

    在过去两个部分中,我们已经讨论了使用IDAPython让逆向工程更容易一些.这一部分我们来看一下条件断点. 当在IDA中调试时,分析者经常会遇到希望可以在一个特殊的地址中断下来的情况,但这只有在一些特 ...

  8. luogu 2296 寻找道路 简单BFS

    简单的BFS,练习基础 #include<bits/stdc++.h> #define rep(i,x,y) for(register int i=x;i<=y;i++) #defi ...

  9. Ubuntu中创建、删除、更改、移动文件的命令

    1.创建一个目录 $ sudo mkdir <目录名>   2.删除一个非空目录下的一切 $ sudo rm -rf <目录名>   3.将文件file1,更改文件名为file ...

  10. Docker - rm 命令

    Docker rm 命令 docker rm :删除容器 docker rm [OPTIONS] CONTAINER [CONTAINER...] -f # 通过SIGKILL信号强制删除一个运行中的 ...