两个重叠的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>
View Code

 

posted on 2019-07-20 16:06  三好学生_小标标  阅读(1265)  评论(0)  编辑  收藏  举报