两个重叠的div做前后翻转

傷城~ 2021-11-26 08:01 313阅读 0赞

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

![1352199-20190720154303703-591755947.png][]

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

![1352199-20190720154614640-1212876533.png][]

图中的两个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定义两个点击事件

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

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

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

完整代码：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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>

转载于:https://www.cnblogs.com/smallmomo/p/11218073.html

[1352199-20190720154303703-591755947.png]: /images/20211126/04450d27964444f4812275b2ecfa44d1.png
[1352199-20190720154614640-1212876533.png]: /images/20211126/7ca341b8f2d148faaf3bc1eac32965c5.png
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211126/93763a0735f543ed9e8f774dc90dc07e.png