参考资料：

　　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. linux 精简开机自启动

    centos7 精简开机自启动 ntsysv rsyslog  crond  sshd network

  2. 插入排序_JAVA

    public class Main { public static void main(String[] args) { int[] A = { 6, 4, 3, 5, 6, 2 }; for (in ...

  3. vue-if与vue-show的区别

    两者都是动态显示DOM元素   不同点: 1.使用方式 v-if是根据后面数据的真假,来判断DOM的添加删除等操作 v-show只是在修改元素的css样式(display属性值)   2.实现过程 v ...

  4. docker 系列 - 基础镜像环境和Docker常用命令整理

    =======================docker 基础镜像环境 alpine=======================可以使用 docker search 命令搜索指定的 image, ...

  5. 从虚拟机指令执行的角度分析JAVA中多态的实现原理

    从虚拟机指令执行的角度分析JAVA中多态的实现原理 前几天突然被一个"家伙"问了几个问题,其中一个是:JAVA中的多态的实现原理是什么? 我一想,这肯定不是从语法的角度来阐释多态吧 ...

  6. Creating A Moddable Unity Game

    前言: 对游戏进行修改与拓展(MOD)是我一直以来感兴趣的东西,我的程序生涯,也是因为在初中接触到GBA口袋妖怪改版开始的,改过也研究过一些游戏的MOD实现方式,早就想在自己的游戏中实现“MOD系统” ...

  7. Debian Security Advisory(Debian安全报告) DSA-4415-1 passenger security update

    Debian Security Advisory(Debian安全报告) DSA-4415-1  passenger security update Package : passenger CVE I ...

  8. 迅为6818开发板-Cortex-A5架构丨支持4G全网通丨GPS丨WIFI丨另有丰富的扩展模块

    迅为6848开发板-S5P6818芯片采用Cortex-A53架构! Cortex-A53和其高端兄弟Cortex-A57一样都是64位架构,实目前ARM的主力,且二者的指令集是完全兼容的,可以组成新 ...

  9. 关于reduce的参数问题

    ECMAScript 5还新增了两个缩小数组的方法: reduce() 和 reduceRight() .这两个方法都会迭代数组的所有项,然后构建一个最终返回的值.其中, reduce() 方法从数组 ...

  10. ssm框架所需jar包整理及各jar包的作用

    以下是我目前新搭建的ssm项目的pom.xml 之后如果需要其他的话再加 <?xml version="1.0" encoding="UTF-8"?> ...