兩個重疊的div作先後翻轉

時間 2019-12-11

標籤兩個重疊 div 先後翻轉欄目 CSS 简体版

原文原文鏈接

當須要作一個翻轉卡片式的div時候，須要兩個div的大小等大例如：css

畫出兩個等大的div後，將他們重疊html

圖中的兩個div作了重疊，作重疊時候用的屬性是jquery

position: absolute;

而且須要將第一頁的css里加上z-index 能夠使的第一頁在第二頁上瀏覽器

main的css須要添加ide

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

課使旋轉中心在div的中點spa

再作完重疊後須要用調試

transform: rotateY(-180deg);

這條語句把第二個div事先令它翻轉180度，爲的是再翻轉回來的時候是正常的code

接下來定義再定義兩個優先級最高的css樣式用於翻轉操做orm

        #first.first-turn{
            z-index: 0;
            transform: rotateY(-180deg);
        }
        #second.second-turn{
            transform: rotateY(0deg);
        }

翻轉的過程當中將第一個div的z-index改成0cdn

最後定義用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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。