两个重叠的div做前后翻转
程序员文章站
2023-11-04 13:23:28
当需要做一个翻转卡片式的div时候，需要两个div的大小等大例如： 画出两个等大的div后，将他们重叠 图中的两个div做了重叠，做重叠时候用的属性是 并且需要将第一页的css里加上z-index 可以使的第一页在第二页上 main的css需要添加 课使旋转中心在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: 0;
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);
完整代码：
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>翻转div</title>
6 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
7 <style>
8 #main{
9 position: absolute;
10 width: 200px;
11 height: 200px;
12 transform: translate(-50%,-50%);
13 }
14 #first{
15 position: absolute;
16 width: 100%;
17 height: 100%;
18 background-color: #0a9404;
19 z-index: 1;
20 transition: .5s cubic-bezier(0.48,-0.56, 0.51, 1.67);
21 }
22 #second{
23 position: absolute;
24 width: 100%;
25 height: 100%;
26 background-color: #aa1111;
27 transform: rotatey(-180deg);
28 transition: .5s cubic-bezier(0.48,-0.56, 0.51, 1.67);
29 }
30 #first.first-turn{
31 z-index: 0;
32 transform: rotatey(-180deg);
33 }
34 #second.second-turn{
35 transform: rotatey(0deg);
36 }
37 </style>
38 </head>
39 <body>
40 <div id="main">
41 <div id="first"></div>
42
43 <div id="second"></div>
44 </div>
45 </body>
46
47 <script>
48 $("#first").click(
49 function(){
50 $("#first").toggleclass("first-turn");
51 $("#second").toggleclass("second-turn");
52 }
53 )
54 $("#second").click(
55 function(){
56 $("#first").toggleclass("first-turn");
57 $("#second").toggleclass("second-turn");
58 }
59 )
60 </script>
61
62 </html>