css3 翻转

参考资料：

　　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 翻转的更多相关文章

css3 翻转和旋转的区别
我以前一直以为旋转跟翻转一样,今日自己旋转了好久都发觉跟翻转差一点点,纠结了十几分钟才明白,只能怪自己的立体感太差了. css3中的transform中有旋转,放缩,倾斜,平移的功能,分别对应的属性是 ...
css3 翻转和旋转的差别
我曾经一直以为旋转跟翻转一样,今日自己旋转了好久都发觉跟翻转差一点点,纠结了十几分钟才明确,仅仅能怪自己的立体感太差了. css3中的transform中有旋转,放缩,倾斜,平移的功能,分别相应的属性 ...
CSS3翻转特效；
CSS代码: *{padding: 0;margin: 0;} .container{width: 90%;padding: 5%;height: 12rem;display: flex;justif ...
CSS3图片翻转切换案例及其中重要属性解析
图片翻转切换,在不使用CSS3的情况下,一般都是使用JS实现动画,同时操作元素的width和left,或者height和top以模拟翻转的效果,并在适当时候改变src或者z-index实现图片切换. ...
简单几步用纯CSS3实现3D翻转效果
作为前端开发人员的必修课,CSS3翻转能带我们完成许多基本动效,本期我们将用CSS3实现hover翻转效果~ 第一步非常简单,我们简单画1个演示方块,为其添加transition和transform ...
CSS翻转小效果
CSS3翻转显示另外一张图: 1.backface-visibility:hidden;背面不可见 2.transform:rotate();旋转 (可以把图片换成本地图片看一下效果) <!DO ...
js,jquery,css,html5特效
包含js,jquery,css,html5特效,源代码本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...
css动画属性性能
性能主要表现:流量.功耗与流畅度在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. ...
JavaScript碎片—函数闭包（模拟面向对象）
经过这几天的博客浏览,让我见识大涨,其中有一篇让我感触犹深,JavaScript语言本身是没有面向对象的,但是那些大神们却深深的模拟出来了面向对象,让我震撼不已.本篇博客就是在此基础上加上自己的认知, ...

随机推荐

[开源 .NET 跨平台 Crawler 数据采集爬虫框架: DotnetSpider] 学习
http://www.cnblogs.com/jjg0519/p/6707513.html
MyBatis SQL语句操作Mysql
本文记录使用Mybatis操作数据库时碰到的一些语句,供以后参考. 一,多条件查询示意SQL语句:SELECT t_field1, t_field2 FROM table_name WHERE t_ ...
JS处理数据四舍五入
一,使用Math.toFixed toFixed() 方法可把 Number 四舍五入为指定小数位数的数字. 语法NumberObject.toFixed(num) 但是网友说toFixed bug比 ...
Immunity Debugger学习
1.Immunity Debugger简介 Immunity Debugger软件专门用于加速漏洞利用程序的开发,辅助漏洞挖掘以及恶意软件分析.它具备一个完整的图形用户界面,同时还配备了迄今为止最为强 ...
MYSQL数据库安装记
这回安装数据库装,做下记录. 1.下载mysql源安装包 shell> wget http://dev.mysql.com/get/mysql57-community-release-el7-8 ...
IEEE LaTeX模板使用BibTeX
IEEE LaTeX 模板使用 BibTeX 在Google Scholar获得的文献引用格式一般是BibTex的,而IEEE Transactions的模板默认用的是BibItem.目前没有什么自动 ...
Commons Lang 介绍
https://commons.apache.org/proper/commons-lang/ https://commons.apache.org/proper/commons-lang/javad ...
20155324 2016-2017-2 《Java程序设计》第6周学习总结
20155324 2016-2017-2 <Java程序设计>第6周学习总结教材学习内容总结 InputStream与OutputStream 串流设计 1.串流:Java将输入/输出抽 ...
java作业（1）
第一题: 模仿JavaAppArguments.java示例,编写一个程序,此程序从命令行接收多个数字,求和之后输出结果. (1)设计思想程序中设置字符串的个数,从键盘进行输入,并且将字符串转化为数 ...
LOJ #2587「APIO2018」铁人两项
是不是$ vector$存图非常慢啊...... 题意:求数对$(x,y,z)$的数量使得存在一条$x$到$z$的路径上经过$y$,要求$x,y,z$两两不同 LOJ #2587 $ Solutio ...

css3 翻转

css3 翻转的更多相关文章

随机推荐

热门专题