两个重叠的div做前后翻转
当需要做一个翻转卡片式的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做前后翻转的更多相关文章
- JS之document例题讲解1(两张表之间数据转移、日期时间选择、子菜单下拉、用div做下拉菜单、事件总结)
作业一:两个列表之间数据从一个列表移动到另一个列表 <div style="width:600px; height:500px; margin-top:20px"> & ...
- 9月23日JavaScript作业----用DIV做下拉列表
例题二.用div做下拉列表 <title>无标题文档</title> <style type="text/css"> *{ margin:0px ...
- java 取小数点后两位 不四舍五入,怎么做
java 取小数点后两位 不四舍五入,怎么做 正常版: //正常版: import java.text.DecimalFormat; import java.math.RoundingMode; De ...
- div+css实现的左右两个等高div
工作当中我们经常会有这样的需求,尤其是在一些内容页面或者网站后台管理页面:左边的div的高度会随着右边的div的内容的增加儿增加,右边div的高度也会随着左边div的内容的增加而增加,也就是左右两侧两 ...
- 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触发 ...
- 横向排列两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法
最近在做一个div css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属性.趁现在还清醒赶紧记下笔记先:一.并排在一行的两个div样式有这种情况:ie或者ff下对于子d ...
- DIV重叠 如何优先显示(div浮在重叠的div上面)
如果有2个div有重叠,默认是根据html解析顺序,最后加载的优先级最高(浮在最上面). 问题: 如果想把前面加载的div显示在最上面?关键字:z-index 举例: --原来的页面:first di ...
- 怎样用div做三角形
20181204 用盒子模型做三角形的效果: <div></div> width:0px; height:0px; border:10px solid red; border- ...
- 客户有两台windows服务器要做sql server双机切换
基本架构 2 windows 2008 server:安装成域控制器,实现故障转移(虚拟ip访问,共享磁盘阵列卷链接主服务器),安装sqlserver2012 1磁盘阵列共享卷:数据库文件放于其中,两 ...
随机推荐
- 简易的CRM系统案例之Servlet+Jsp+MySQL版本
数据库配置 datebase.properties driver=com.mysql.jdbc.Driver url=jdbc:mysql://127.0.0.1:3306/infos usernam ...
- Springboot整合Elasticsearch报错availableProcessors is already set to [4], rejecting [4]
Springboot整合Elasticsearch报错 今天使用SpringBoot整合Elasticsearch时候,相关的配置完成后,启动项目就报错了. nested exception is j ...
- 阶段5 3.微服务项目【学成在线】_day18 用户授权_16-细粒度授权-我的课程细粒度授权-测试
重启课程管理服务 刷新页面,令牌到期需要先登陆 首先拿到company的id 测试2号公司
- 记EXSI虚拟机CentOS7断电无法启动修复过程
参考:https://msd.misuland.com/pd/3148108429789233656 EXSI6.7安装虚拟机CentOS7.5 1804 断电后启动页面进度条很慢 最后出现如下提示 ...
- gd库的相关内容
gd库注意事项 对于乱码问题 在php里面包含 header("content-type:image/png"); 这样输出的图像就不会乱码了后面跟的Png也可以改变为自己想要输出 ...
- todolist形式的搜索框,分开组件写的,点击上下键时,框内显示当前选中的内容
### 首先 安装react 脚手架 cnpm install create-react-app -g //只需要在电脑上安装一次就好了,以后不用再下载了 ### 创建项目 crea ...
- docker中使用Mysql8+phpmyadmin
现在基本装这套都用docker了,有一些小坑在里面,简单说一下. 运行mysql比较简单,参考mysql⭐Docker Official Images,需要注意不要忘记暴露端口给phpmyadmin用 ...
- 【计算机视觉】Selective Search for Object Recognition论文阅读3
Selective Search for Object Recoginition surgewong@gmail.com http://blog.csdn.net/surgewong 在前 ...
- 高级UI-符合MD的常用控件
在Google提供的控件中,在support-design及v4,v7包中,存在着很多符合MD标准的控件,这里罗列出一些常用的控件 TextInputLayout 这个控件在作为输入框的时候是极其方便 ...
- 动态规划算法(Dynamic Programming,简称 DP)
动态规划算法(Dynamic Programming,简称 DP) 浅谈动态规划 动态规划算法(Dynamic Programming,简称 DP)似乎是一种很高深莫测的算法,你会在一些面试或算法书籍 ...