参考资料：

　　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. Redis AOF、RDB持久化

    持久化一:RDB方式 默认配置: save 900 1save 300 10save 60 10000 持久化二:AOF方式 默认配置:appendonly no,appendfilename &qu ...

  2. 鼠标右键Table的td弹出多级菜单,双击td编辑

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  3. CSS3笔记1

    1.CSS字体设置 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  4. 剑指offer面试题4: 二维数组中的查找

    题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数 ...

  5. Objects类的静态方法

    提供了几个静态方法,比如进行对象之间的比较等,而又因为Object是任何对象的超类,因为每个对象都可以调用这几个方法. 1.equals方法 可以防止空指针异常 String s1 = null; S ...

  6. sql审核工具

    https://github.com/Meituan-Dianping/SQLAdvisor/blob/master/doc/QUICK_START.md

  7. getaddrinfo函数

    一.功能 对于IPv4和IPv6均适用,可以处理名字到地址以及服务到端口这两种变换,返回的是一个sockaddr结构而不是一个地址队列 二.函数原型 #include <netdb.h> ...

  8. lua 立即执行函数

    背景 不同文件中,lua提供模块写法, 使用local修饰,可以将变量或者函数,声明为模块内有效,例如 模块暴漏变量使用 return 表的方式. local aafunc = function() ...

  9. oracle行转列函数以及一些窗口函数（PIVOT ,OVER）

    可以查看博客园上传的文件 pivot  除了要转成列的字段(classnum,classid)值不一样,其他值都应该相同,否则转的数据有问题

  10. UML之涉众/参与者（角色/执行者）(Actor)/业务主角(BusinessActor)/业务工人(BusinessWorker)/用户/角色辨析【图解】

    参考文档: [业务建模](http://www.baike.com/wiki/%E4%B8%9A%E5%8A%A1%E5%BB%BA%E6%A8%A1) [UML 核心元素之参与者](http://w ...