参考资料：

　　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. ARM寄存器介绍

    ARM处理器共有37个寄存器.其中包括:31个通用寄存器,包括程序计数器(PC)在内.这些寄存器都是32位寄存器.以及6个32位状态寄存器.但目前只使用了其中12位.ARM处理器共有7种不同的处理器模 ...

  2. java Calendar 入门【转】

    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); Calendar c = Calendar. ...

  3. weblogic每天日志合并shell脚本 [个人记录]【转】【补】

    from RogerZhu modified by King sh logback.rb "/data/logs/" "/tmp/domain" "a ...

  4. 数据库操作中如何批量执行多个sql文件？

    数据库操作中如何批量执行多个sql文件? 1.应用场景:在历史数据导入过程中,会发现有很多个表形成的.sql文件,要是一个一个文件去手动执行,实在是费时间,所以采取以下方法. 2.将文件放在一定位置, ...

  5. wav音频文件格式解析【个人笔记】(自用)

    1. WAV格式 wav是微软开发的一种音频文件格式,注意,wav文件格式是无损音频文件格式,相对于其他音频格式文件数据是没有经过压缩的,通常文件也相对比较大些.. 支持多种音频数字,取样频率和声道, ...

  6. 网络编程之Socket & ServerSocket

    网络编程之Socket & ServerSocket Socket:网络套接字,网络插座,建立网络通信连接至少要一对端口号(socket).socket本质是编程接口(API),对TCP/IP ...

  7. 关于CPU的User、Nice、System、Wait、Idle各个参数的解释

    使用Ganglia监控整个Hadoop集群,看到Ganglia采集的各种指标:CPU各个具体的指标含义解释如下: ①CPU(监测到的master主机上的CPU使用情况) 从图中看出,一共有五个关于CP ...

  8. C# UserControl集合属性使用

    在UserControl中,定义集合属性时,如果直接使用List是检测不到在属性框中的列表修改变化的,可以通过 ObservableCollection() 实现 1.定义类 [Serializabl ...

  9. 哪些领域适合开发微信小程序

    什么是小程序?小程序的实质就是webapp,最典型的案例是接入微信的“滴滴打车”.虽然没有下载安装APP,但通过微信完全可以正常使用滴滴打车的服务,需要的定位.支付等底层能力,微信都可以提供. 张小龙 ...

  10. Filter 快速开始 异步Servlet 异步请求 AsyncContext 异步线程 异步派发 过滤器拦截

    [web.xml] <filter> <filter-name>normalFilter</filter-name> <filter-class>net ...