当需要做一个翻转卡片式的div时候，需要两个div的大小等大例如：

画出两个等大的div后，将他们重叠

图中的两个div做了重叠，做重叠时候用的属性是

position: absolute;

并且需要将第一页的css里加上z-index 可以使的第一页在第二页上

main的css需要添加

transform: translate(-50%,-50%);

课使旋转中心在div的中点

再做完重叠后需要用

transform: rotateY(-180deg);

这条语句把第二个div事先令它翻转180度，为的是再翻转回来的时候是正常的

接下来定义再定义两个优先级最高的css样式 用于翻转操作

        #first.first-turn{

            z-index:;

            transform: rotateY(-180deg);

        }

        #second.second-turn{

            transform: rotateY(0deg);

        }

翻转的过程中将第一个div的z-index改为0

最后定义用JQ定义两个点击事件

<script>

    $("#first").click(

        function(){

            $("#first").toggleClass("first-turn");

            $("#second").toggleClass("second-turn");

        }

    )

    $("#second").click(

        function(){

            $("#first").toggleClass("first-turn");

            $("#second").toggleClass("second-turn");

        }

    )

</script>

意思为，当点击时候增加一个css

如果要修改翻转速度可以在第一个div和第二个div的css里添加如下语句。调试可以通过谷歌浏览器

transition: .5s cubic-bezier(0.48,-0.56, 0.51, 1.67);

完整代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>翻转div</title>

     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

     <style>

         #main{

             position: absolute;

             width: 200px;

             height: 200px;

             transform: translate(-50%,-50%);

         }

         #first{

             position: absolute;

             width: 100%;

             height: 100%;

             background-color: #0a9404;

             z-index: 1;

             transition: .5s cubic-bezier(0.48,-0.56, 0.51, 1.67);

         }

         #second{

             position: absolute;

             width: 100%;

             height: 100%;

             background-color: #aa1111;

             transform: rotateY(-180deg);

             transition: .5s cubic-bezier(0.48,-0.56, 0.51, 1.67);

         }

         #first.first-turn{

             z-index: 0;

             transform: rotateY(-180deg);

         }

         #second.second-turn{

             transform: rotateY(0deg);

         }

     </style>

 </head>

 <body>

 <div id="main">

     <div id="first"></div>

     <div id="second"></div>

 </div>

 </body>

 <script>

     $("#first").click(

         function(){

             $("#first").toggleClass("first-turn");

             $("#second").toggleClass("second-turn");

         }

     )

     $("#second").click(

         function(){

             $("#first").toggleClass("first-turn");

             $("#second").toggleClass("second-turn");

         }

     )

 </script>

 </html>

两个重叠的div做前后翻转的更多相关文章

  1. JS之document例题讲解1（两张表之间数据转移、日期时间选择、子菜单下拉、用div做下拉菜单、事件总结）

    作业一:两个列表之间数据从一个列表移动到另一个列表 <div style="width:600px; height:500px; margin-top:20px"> & ...

  2. 9月23日JavaScript作业----用DIV做下拉列表

    例题二.用div做下拉列表 <title>无标题文档</title> <style type="text/css"> *{ margin:0px ...

  3. java 取小数点后两位 不四舍五入,怎么做

    java 取小数点后两位 不四舍五入,怎么做 正常版: //正常版: import java.text.DecimalFormat; import java.math.RoundingMode; De ...

  4. div+css实现的左右两个等高div

    工作当中我们经常会有这样的需求,尤其是在一些内容页面或者网站后台管理页面:左边的div的高度会随着右边的div的内容的增加儿增加,右边div的高度也会随着左边div的内容的增加而增加,也就是左右两侧两 ...

  5. css hover 动画 transition:background-color 0.2s,color 0.2s; 外层套内层，正常是 里外层 鼠标上来 外层有hover，如果就想到里层hover触发外层hover，要用外层position 定义绝对定位，内层的hover跳出外层的div，这样视觉上就是两个单独的div，进行内外层联动。

    css hover 动画 transition:background-color 0.2s,color 0.2s; 外层套内层,正常是 里外层 鼠标上来 外层有hover,如果就想到里层hover触发 ...

  6. 横向排列两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法

    最近在做一个div css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属性.趁现在还清醒赶紧记下笔记先:一.并排在一行的两个div样式有这种情况:ie或者ff下对于子d ...

  7. DIV重叠 如何优先显示（div浮在重叠的div上面）

    如果有2个div有重叠,默认是根据html解析顺序,最后加载的优先级最高(浮在最上面). 问题: 如果想把前面加载的div显示在最上面?关键字:z-index 举例: --原来的页面:first di ...

  8. 怎样用div做三角形

    20181204 用盒子模型做三角形的效果: <div></div> width:0px; height:0px; border:10px solid red; border- ...

  9. 客户有两台windows服务器要做sql server双机切换

    基本架构 2 windows 2008 server:安装成域控制器,实现故障转移(虚拟ip访问,共享磁盘阵列卷链接主服务器),安装sqlserver2012 1磁盘阵列共享卷:数据库文件放于其中,两 ...

随机推荐

  1. MySql 里的IFNULL用法

    IFNULL(expr1,expr2)的用法: 假如expr1 不为 NULL,则 IFNULL() 的返回值为 expr1; 否则其返回值为expr2.IFNULL()的返回值是数字或是字符串,具体 ...

  2. 让群辉支持DTS音轨

    让群晖Video Station支持DTS音轨的方法原因:因版权问题,群晖Video Station默认不支持DTS音轨,因此默认不能播放使用DTS音轨的影片. 网上搜到好多解决办法,通常是让添加源h ...

  3. RT-Thread代码启动过程——以及 $Sub$ $main 与 $Super$ $main

    [转]https://blog.csdn.net/yang1111111112/article/details/80913001 我们找到系统复位的地方,可以往下单步跟踪. ①从系统初始化开始执行,将 ...

  4. Windows7 安装docker工具的方法

    1.参考官方文档 https://docs.docker.com/toolbox/toolbox_install_windows/ 注意:因为我的电脑是windows10 家庭版,所以,无法使用 Do ...

  5. 阶段5 3.微服务项目【学成在线】_day17 用户认证 Zuul_01-用户认证-用户认证流程分析

    1 用户认证 1.1 用户认证流程分析 用户认证流程如下: 访问下面的资源需要携带身份令牌和jwt令牌,客户端可以通过身份认证的令牌从服务端拿到长令牌, 一会要实现认证服务请求用户中心从数据库内来查询 ...

  6. 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_20-认证接口开发-接口测试

    测试接口 因为继承了spring  security会拦截这个请求,我们需要写代码 让他对这个认证接口放行 查看代码发现之前已经写过放行的代码了 发现是路径前面少了auth 加断点,测试.申请令牌 r ...

  7. 算法习题---4-3黑白棋（UVa220）

    一:题目 系统提示当前旗手W/B(白/黑)下子,例如W下子,那么W下的位置必须是夹住黑色棋子的位置才可以. 夹住方式:横向.竖向.斜向 注意落子后将夹住的黑棋吞噬变为白棋 (一)题目详解 .棋盘以数组 ...

  8. JSONP实现Ajax跨域请求

    前言 由于浏览器存在同源策略的机制,所谓同源策略就是阻止从一个源(域名,包括同一个根域名下的不同二级域名)加载的文档或者脚本获取/或者设置另一个源加载的文档属性. 但比较特别的是:由于同源策略是浏览器 ...

  9. Intellij-编码设置

    目录 文件编码修改 @(目录) 文件编码修改 • 上图标注 1 所示,IDE 的编码默认是 UTF-8 , Project Encoding 虽然默认是 GBK ,但是一般都建议 修改为 UTF-8 ...

  10. 使用 ServiceStack.Text 序列化 json

    相信做 .net 开发的朋友经常会遇到 json 序列化这样的需要,今天发篇文章总结下自己使用 ServiceStack.Text 来序列化 json.它的速度比 Newtonsoft.Json 快很 ...